@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);@import url(https://fonts.googleapis.com/css?family=Prompt:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i);@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300,300i,400,400i,600,600i,700);/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

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

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

.btn {
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  padding: 25px 80px;
  display: inline-block;
  margin: 15px 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  outline: none;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.btn:after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* Pseudo elements for icons */

.btn:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

.icon-envelope:before {
  content: "\E000";
}

.icon-cart:before {
  content: "\E007";
}

.icon-cart-2:before {
  content: "\E008";
}

.icon-heart:before {
  content: "\E009";
}

/* Filled heart */

.icon-heart:after,
.icon-heart-2:before {
  content: "\E00A";
}

.icon-star:before {
  content: "\E00B";
}

/* Filled star */

.icon-star:after,
.icon-star-2:before {
  content: "\E00C";
}

.icon-arrow-right:before {
  content: "\E00D";
}

.icon-arrow-left:before {
  content: "\E003";
}

.icon-truck:before {
  content: "\E00E";
}

.icon-remove:before {
  content: "\E00F";
}

.icon-cog:before {
  content: "\E010";
}

.icon-plus:before,
.icon-plus:after {
  content: "\E011";
}

.icon-minus:before {
  content: "\E012";
}

.bh-icon-smiley:before {
  content: "\E001";
}

.bh-icon-sad:before {
  content: "\E002";
}

.icon-file:before {
  content: "\E004";
}

.icon-remove-2:before {
  content: "\E005";
}

/* Button 1 */

.btn-1 {
  border: 3px solid #fff;
  color: #fff;
}

/* Button 1a */

.btn-1a:hover,
.btn-1a:active {
  color: #0e83cd;
  background: #fff;
}

/* Button 1b */

.btn-1b:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background: #fff;
}

.btn-1b:hover,
.btn-1b:active {
  color: #0e83cd;
}

.btn-1b:hover:after,
.btn-1b:active:after {
  height: 100%;
}

/* Button 1c */

.btn-1c:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
}

.btn-1c:hover,
.btn-1c:active {
  color: #0e83cd;
}

.btn-1c:hover:after,
.btn-1c:active:after {
  width: 100%;
}

/* Button 1d */

.btn-1d {
  overflow: hidden;
}

.btn-1d:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  background: #fff;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-1d:hover,
.btn-1d:active {
  color: #0e83cd;
}

.btn-1d:hover:after {
  width: 90%;
  opacity: 1;
}

.btn-1d:active:after {
  width: 101%;
  opacity: 1;
}

/* Button 1e */

.btn-1e {
  overflow: hidden;
}

.btn-1e:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background: #fff;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-1e:hover,
.btn-1e:active {
  color: #0e83cd;
}

.btn-1e:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-1e:active:after {
  height: 400%;
  opacity: 1;
}

/* Button 1f */

.btn-1f {
  overflow: hidden;
}

.btn-1f:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background: #fff;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-1f:hover,
.btn-1f:active {
  color: #0e83cd;
}

.btn-1f:hover:after {
  height: 75%;
  opacity: 1;
}

.btn-1f:active:after {
  height: 130%;
  opacity: 1;
}

/* Button 2 */

.btn-2 {
  background: #cb4e4e;
  color: #fff;
  box-shadow: 0 6px #ab3c3c;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

/* Button 2a */

.btn-2a {
  border-radius: 0 0 5px 5px;
}

.btn-2a:hover {
  box-shadow: 0 4px #ab3c3c;
  top: 2px;
}

.btn-2a:active {
  box-shadow: 0 0 #ab3c3c;
  top: 6px;
}

/* Button 2b */

.btn-2b {
  border-radius: 0 0 5px 5px;
}

.btn-2b:hover {
  box-shadow: 0 8px #ab3c3c;
  top: -2px;
}

.btn-2b:active {
  box-shadow: 0 0 #ab3c3c;
  top: 6px;
}

/* Button 2c */

.btn-2c {
  border-radius: 5px;
}

.btn-2c:hover {
  box-shadow: 0 4px #ab3c3c;
  top: 2px;
}

.btn-2c:active {
  box-shadow: 0 0 #ab3c3c;
  top: 6px;
}

/* Button 2d */

.btn-2d {
  border-radius: 5px;
}

.btn-2d:hover {
  box-shadow: 0 8px #ab3c3c;
  top: -2px;
}

.btn-2d:active {
  box-shadow: 0 0 #ab3c3c;
  top: 6px;
}

/* Button 2e */

.btn-2e {
  border-radius: 5px;
  box-shadow: -6px 0 #ab3c3c;
}

.btn-2e:hover {
  box-shadow: -4px 0 #ab3c3c;
  left: -2px;
}

.btn-2e:active {
  box-shadow: 0 0 #ab3c3c;
  left: -6px;
}

/* Button 2f */

.btn-2f {
  border-radius: 5px;
  box-shadow: 6px 0 #ab3c3c;
}

.btn-2f:hover {
  box-shadow: 4px 0 #ab3c3c;
  left: 2px;
}

.btn-2f:active {
  box-shadow: 0 0 #ab3c3c;
  left: 6px;
}

/* Button 2g */

.btn-2g {
  border-radius: 40px;
}

.btn-2g:hover {
  box-shadow: 0 4px #ab3c3c;
  top: 2px;
}

.btn-2g:active {
  box-shadow: 0 0 #ab3c3c;
  top: 6px;
}

/* Button 2h */

.btn-2h {
  border-radius: 20px;
}

.btn-2h:hover {
  box-shadow: 0 4px #ab3c3c;
  top: 2px;
}

.btn-2h:active {
  box-shadow: 0 0 #ab3c3c;
  top: 6px;
}

/* Button 2i */

.btn-2i {
  border-radius: 50%;
  width: 90px;
  height: 90px;
  padding: 0;
}

.btn-2i:hover {
  box-shadow: 0 4px #ab3c3c;
  top: 2px;
}

.btn-2i:active {
  box-shadow: 0 0 #ab3c3c;
  top: 6px;
}

/* Button 2j */

.btn-2j {
  border-radius: 50%;
  width: 90px;
  height: 90px;
  padding: 0;
}

.btn-2j:hover {
  box-shadow: 0 8px #ab3c3c;
  top: -2px;
}

.btn-2j:active {
  box-shadow: 0 0 #ab3c3c;
  top: 6px;
}

/* Button 3 */

.btn-3 {
  background: #fcad26;
  color: #fff;
}

.btn-3:hover {
  background: #f29e0d;
}

.btn-3:active {
  background: #f58500;
  top: 2px;
}

.btn-3:before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 3;
  font-size: 140%;
  width: 60px;
}

/* Button 3a */

.btn-3a {
  padding: 25px 60px 25px 120px;
}

.btn-3a:before {
  background: rgba(0, 0, 0, 0.05);
}

/* Button 3b */

.btn-3b {
  padding: 25px 60px 25px 120px;
  border-radius: 10px;
}

.btn-3b:before {
  border-right: 2px solid rgba(255, 255, 255, 0.5);
}

/* Button 3c */

.btn-3c {
  padding: 80px 20px 20px 20px;
  border-radius: 10px;
  box-shadow: 0 3px #da9622;
}

.btn-3c:active {
  box-shadow: 0 3px #dc7801;
}

.btn-3c:before {
  height: 60px;
  width: 100%;
  line-height: 60px;
  background: #fff;
  color: #f29e0d;
  border-radius: 10px 10px 0 0;
}

.btn-3c:active:before {
  color: #f58500;
}

/* Button 3d */

.btn-3d {
  padding: 25px 60px 25px 120px;
  border-radius: 10px;
}

.btn-3d:before {
  background: #fff;
  color: #fcad26;
  z-index: 2;
  border-radius: 10px 0 0 10px;
}

.btn-3d:after {
  width: 20px;
  height: 20px;
  background: #fff;
  z-index: 1;
  left: 55px;
  top: 50%;
  margin: -10px 0 0 -10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn-3d:active:before {
  color: #f58500;
}

.btn-3d:active {
  top: 0;
}

.btn-3d:active:after {
  left: 60px;
}

/* Button 3e */

.btn-3e {
  padding: 25px 120px 25px 60px;
  overflow: hidden;
}

.btn-3e:before {
  left: auto;
  right: 10px;
  z-index: 2;
}

.btn-3e:after {
  width: 30%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
  right: 0;
  top: 0;
  margin: -5px 0 0 -5px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotate(-20deg);
  -moz-transform-origin: 0 0;
  -moz-transform: rotate(-20deg);
  -ms-transform-origin: 0 0;
  -ms-transform: rotate(-20deg);
  transform-origin: 0 0;
  transform: rotate(-20deg);
}

.btn-3e:hover:after {
  width: 40%;
}

/* Button 4 */

.btn-4 {
  border-radius: 50px;
  border: 3px solid #fff;
  color: #fff;
  overflow: hidden;
}

.btn-4:active {
  border-color: #17954c;
  color: #17954c;
}

.btn-4:hover {
  background: #24b662;
}

.btn-4:before {
  position: absolute;
  height: 100%;
  font-size: 125%;
  line-height: 3.5;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-4:active:before {
  color: #17954c;
}

/* Button 4a */

.btn-4a:before {
  left: 130%;
  top: 0;
}

.btn-4a:hover:before {
  left: 80%;
}

/* Button 4b */

.btn-4b:before {
  left: -50%;
  top: 0;
}

.btn-4b:hover:before {
  left: 10%;
}

/* Button 4c */

.btn-4c:before {
  left: 70%;
  opacity: 0;
  top: 0;
}

.btn-4c:hover:before {
  left: 80%;
  opacity: 1;
}

/* Button 4d */

.btn-4d:before {
  left: 30%;
  opacity: 0;
  top: 0;
}

.btn-4d:hover:before {
  left: 10%;
  opacity: 1;
}

/* Button 5 */

.btn-5 {
  background: #823aa0;
  color: #fff;
  height: 70px;
  min-width: 260px;
  line-height: 24px;
  font-size: 16px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.btn-5:active {
  background: #9053a9;
  top: 2px;
}

.btn-5 span {
  display: inline-block;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s;
  -webkit-backface-visibility: hidden;
  -moz-transition: all 0.3s;
  -moz-backface-visibility: hidden;
  transition: all 0.3s;
  backface-visibility: hidden;
}

.btn-5:before {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 2.5;
  font-size: 180%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-5:active:before {
  color: #703b87;
}

/* Button 5a */

.btn-5a:hover span {
  -webkit-transform: translateY(300%);
  -moz-transform: translateY(300%);
  -ms-transform: translateY(300%);
  transform: translateY(300%);
}

.btn-5a:before {
  left: 0;
  top: -100%;
}

.btn-5a:hover:before {
  top: 0;
}

/* Button 5b */

.btn-5b:hover span {
  -webkit-transform: translateX(200%);
  -moz-transform: translateX(200%);
  -ms-transform: translateX(200%);
  transform: translateX(200%);
}

.btn-5b:before {
  left: -100%;
  top: 0;
}

.btn-5b:hover:before {
  left: 0;
}

/* Button 6 */

.btn-6 {
  color: #fff;
  background: #226fbe;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.btn-6:active {
  top: 2px;
}

/* Button 6a */

.btn-6a {
  border: 4px solid #226fbe;
}

.btn-6a:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 6b */

.btn-6b {
  border: 4px solid #226fbe;
  border-radius: 15px;
}

.btn-6b:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 6c */

.btn-6c {
  border: 4px solid #226fbe;
  border-radius: 60px;
}

.btn-6c:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 6d */

.btn-6d {
  border: 2px dashed #226fbe;
}

.btn-6d:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 6e */

.btn-6e {
  border: 2px dashed #226fbe;
  border-radius: 15px;
}

.btn-6e:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 6f */

.btn-6f {
  border: 2px dashed #226fbe;
  border-radius: 60px;
}

.btn-6f:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 6g */

.btn-6g {
  border: 2px dotted #226fbe;
}

.btn-6g:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 6h */

.btn-6h {
  border: 2px dotted #226fbe;
  border-radius: 15px;
}

.btn-6h:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 6i */

.btn-6i {
  border: 2px dotted #226fbe;
  border-radius: 60px;
}

.btn-6i:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 6j */

.btn-6j {
  border: 4px double #226fbe;
}

.btn-6j:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 6k */

.btn-6k {
  border: 4px double #226fbe;
  border-radius: 15px;
}

.btn-6k:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 6l */

.btn-6l {
  border: 4px double #226fbe;
  border-radius: 60px;
}

.btn-6l:hover {
  background: transparent;
  color: #226fbe;
}

/* Button 7 */

.btn-7 {
  background: #17aa56;
  color: #fff;
  border-radius: 7px;
  box-shadow: 0 5px #119e4d;
  padding: 25px 60px 25px 90px;
}

/* Button 7a */

.btn-7a {
  overflow: hidden;
}

.btn-7a:before {
  position: absolute;
  left: 0;
  width: 40%;
  font-size: 160%;
  line-height: 0.8;
  color: #0a833d;
}

.btn-7a.btn-activated {
  -webkit-animation: fadeOutText 0.5s;
  -moz-animation: fadeOutText 0.5s;
  animation: fadeOutText 0.5s;
}

.btn-7a.btn-activated:before {
  -webkit-animation: moveToRight 0.5s;
  -moz-animation: moveToRight 0.5s;
  animation: moveToRight 0.5s;
}

@-webkit-keyframes fadeOutText {
  0% {
    color: transparent;
  }

  80% {
    color: transparent;
  }

  100% {
    color: #fff;
  }
}

@-moz-keyframes fadeOutText {
  0% {
    color: transparent;
  }

  80% {
    color: transparent;
  }

  100% {
    color: #fff;
  }
}

@keyframes fadeOutText {
  0% {
    color: transparent;
  }

  80% {
    color: transparent;
  }

  100% {
    color: #fff;
  }
}

@-webkit-keyframes moveToRight {
  80% {
    -webkit-transform: translateX(250%);
  }

  81% {
    opacity: 1;
    -webkit-transform: translateX(250%);
  }

  82% {
    opacity: 0;
    -webkit-transform: translateX(250%);
  }

  83% {
    opacity: 0;
    -webkit-transform: translateX(-50%);
  }

  84% {
    opacity: 1;
    -webkit-transform: translateX(-50%);
  }

  100% {
    -webkit-transform: translateX(0%);
  }
}

@-moz-keyframes moveToRight {
  80% {
    -moz-transform: translateX(250%);
  }

  81% {
    opacity: 1;
    -moz-transform: translateX(250%);
  }

  82% {
    opacity: 0;
    -moz-transform: translateX(250%);
  }

  83% {
    opacity: 0;
    -moz-transform: translateX(-50%);
  }

  84% {
    opacity: 1;
    -moz-transform: translateX(-50%);
  }

  100% {
    -moz-transform: translateX(0%);
  }
}

@keyframes moveToRight {
  80% {
    transform: translateX(250%);
  }

  81% {
    opacity: 1;
    transform: translateX(250%);
  }

  82% {
    opacity: 0;
    transform: translateX(250%);
  }

  83% {
    opacity: 0;
    transform: translateX(-50%);
  }

  84% {
    opacity: 1;
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0%);
  }
}

/* Button 7b */

.btn-7b {
  overflow: hidden;
}

.btn-7b:before {
  position: absolute;
  left: 0;
  width: 40%;
  font-size: 160%;
  line-height: 0.8;
  color: #0a833d;
}

.btn-7b.btn-activated:before {
  -webkit-animation: scaleUp 0.5s;
  -moz-animation: scaleUp 0.5s;
  animation: scaleUp 0.5s;
}

@-webkit-keyframes scaleUp {
  80% {
    opacity: 0;
    -webkit-transform: scale(2);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(2);
  }
}

@-moz-keyframes scaleUp {
  80% {
    opacity: 0;
    -moz-transform: scale(2);
  }

  100% {
    opacity: 0;
    -moz-transform: scale(2);
  }
}

@keyframes scaleUp {
  80% {
    opacity: 0;
    transform: scale(2);
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* Icon only style */

.btn-icon-only {
  font-size: 0;
  padding: 25px 30px;
}

.btn-icon-only:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 26px;
  line-height: 54px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Button 7c */

.btn-7c {
  overflow: hidden;
}

.btn-7c:before {
  color: #fff;
  z-index: 1;
}

.btn-7c:after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 0;
  width: 0;
  background: #0a833d;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.btn-7c.btn-activated:after {
  -webkit-animation: fillToRight 0.7s forwards;
  -moz-animation: fillToRight 0.7s forwards;
  animation: fillToRight 0.7s forwards;
}

@-webkit-keyframes fillToRight {
  to {
    width: 100%;
  }
}

@-moz-keyframes fillToRight {
  to {
    width: 100%;
  }
}

@keyframes fillToRight {
  to {
    width: 100%;
  }
}

/* Button 7d */

.btn-7d {
  overflow: hidden;
}

.btn-7d:before {
  color: #fff;
  z-index: 1;
}

.btn-7d:after {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  z-index: 0;
  background: #21bb63;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.btn-7d.btn-activated:after {
  -webkit-animation: emptyBottom 0.7s forwards;
  -moz-animation: emptyBottom 0.7s forwards;
  animation: emptyBottom 0.7s forwards;
}

@-webkit-keyframes emptyBottom {
  to {
    height: 100%;
  }
}

@-moz-keyframes emptyBottom {
  to {
    height: 100%;
  }
}

@keyframes emptyBottom {
  to {
    height: 100%;
  }
}

/* Button 7e */

.btn-7e:after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  font-size: 26px;
  line-height: 54px;
  color: #ea515e;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.btn-7e.btn-activated:after {
  -webkit-animation: scaleFade 0.5s forwards;
  -moz-animation: scaleFade 0.5s forwards;
  animation: scaleFade 0.5s forwards;
}

@-webkit-keyframes scaleFade {
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
  }
}

@-moz-keyframes scaleFade {
  50% {
    opacity: 1;
    -moz-transform: scale(1);
  }

  100% {
    opacity: 0;
    -moz-transform: scale(2.5);
  }
}

@keyframes scaleFade {
  50% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

/* Button 7f */

.btn-7f:before {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
}

.btn-7f:after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  font-size: 26px;
  line-height: 54px;
  color: #ffe44d;
  visibility: hidden;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #ffe44d;
  -webkit-transform: scale(4);
  -moz-transform: scale(4);
  -ms-transform: scale(4);
  transform: scale(4);
  opacity: 0;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.btn-7f.btn-activated:after {
  visibility: visible;
  -webkit-animation: dropDown 0.3s forwards;
  -moz-animation: dropDown 0.3s forwards;
  animation: dropDown 0.3s forwards;
}

@-webkit-keyframes dropDown {
  to {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes dropDown {
  to {
    opacity: 1;
    -moz-transform: scale(1);
  }
}

@keyframes dropDown {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Button 7g */

.btn-7g:after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  font-size: 26px;
  line-height: 54px;
  color: #0a833d;
  visibility: hidden;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  opacity: 0;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.btn-7g.btn-activated:after {
  visibility: visible;
  -webkit-animation: dropDownFade 0.5s forwards;
  -moz-animation: dropDownFade 0.5s forwards;
  animation: dropDownFade 0.5s forwards;
}

@-webkit-keyframes dropDownFade {
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
  }
}

@-moz-keyframes dropDownFade {
  50% {
    opacity: 1;
    -moz-transform: scale(1);
  }

  100% {
    opacity: 0;
    -moz-transform: scale(1.5);
  }
}

@keyframes dropDownFade {
  50% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* Button 7h */

.btn-7h span {
  display: inline-block;
  width: 100%;
}

.btn-7h:before {
  position: absolute;
  left: 0;
  width: 40%;
  font-size: 160%;
  line-height: 0.8;
  color: #0a833d;
}

/* Success and error */

.btn-success,
.btn-error {
  color: transparent;
}

.btn-success:after,
.btn-error:after {
  z-index: 1;
  color: #fff;
  left: 40%;
}

.btn-success:before {
  content: "\E001";
}

.btn-success:after {
  content: "Success!";
  -webkit-animation: moveUp 0.5s;
  -moz-animation: moveUp 0.5s;
  animation: moveUp 0.5s;
}

@-webkit-keyframes moveUp {
  0% {
    -webkit-transform: translateY(50%);
    opacity: 0;
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes moveUp {
  0% {
    -moz-transform: translateY(50%);
    opacity: 0;
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-error {
  -webkit-animation: shake 0.5s;
  -moz-animation: shake 0.5s;
  animation: shake 0.5s;
}

/* From Dan Eden's animate.css: http://daneden.me/animate/ */

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
  }
}

@-moz-keyframes shake {
  0%, 100% {
    -moz-transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -moz-transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -moz-transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.btn-error:before {
  content: "\E002";
}

.btn-error:after {
  content: "Error!";
  -webkit-animation: scaleFromUp 0.5s;
  -moz-animation: scaleFromUp 0.5s;
  animation: scaleFromUp 0.5s;
}

@-webkit-keyframes scaleFromUp {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes scaleFromUp {
  0% {
    -moz-transform: scale(0);
    opacity: 0;
  }

  100% {
    opacity: 1;
    -moz-transform: scale(1);
  }
}

@keyframes scaleFromUp {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Special trash effect */

.trash-effect {
  position: relative;
  max-width: 320px;
  margin: 60px auto 0;
}

.trash-effect .icon-file {
  font-size: 30px;
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: 50%;
  margin: -45px 0 0 -25px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translateX(90px) translateY(20px) scale(1);
  -moz-transform: translateX(90px) translateY(20px) scale(1);
  -ms-transform: translateX(90px) translateY(20px) scale(1);
  transform: translateX(90px) translateY(20px) scale(1);
}

.trash-effect .icon-file:nth-child(2) {
  -webkit-transform: translateX(140px) translateY(-10px) scale(1);
  -moz-transform: translateX(140px) translateY(-10px) scale(1);
  -ms-transform: translateX(140px) translateY(-10px) scale(1);
  transform: translateX(140px) translateY(-10px) scale(1);
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.trash-effect .icon-file:nth-child(3) {
  -webkit-transform: translateX(140px) translateY(50px) scale(1);
  -moz-transform: translateX(140px) translateY(50px) scale(1);
  -ms-transform: translateX(140px) translateY(50px) scale(1);
  transform: translateX(140px) translateY(50px) scale(1);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.trash-effect.trash-effect-active .icon-file {
  -webkit-transform: translateX(-100px) translateY(-10px) scale(0);
  -moz-transform: translateX(-100px) translateY(-10px) scale(0);
  -ms-transform: translateX(-100px) translateY(-10px) scale(0);
  transform: translateX(-100px) translateY(-10px) scale(0);
}

/* Button 7i */

.btn-7i {
  box-shadow: none;
  border-radius: 0 0 7px 7px;
  padding: 27px 33px;
  -webkit-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
}

.btn-7i:before {
  line-height: 45px;
}

.btn-7i:after {
  height: 11px;
  /* should be 10px but in Chrome Version 34.0.1847.131 there's a gap because of the transform of the button */
  width: 100%;
  background: #17aa56;
  border-radius: 7px 7px 0 0;
  left: 0;
  top: -10px;
  z-index: 1;
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

.trash-effect-active .btn-7i:after {
  -webkit-animation: openTrash 0.5s;
  -moz-animation: openTrash 0.5s;
  animation: openTrash 0.5s;
}

@-webkit-keyframes openTrash {
  50% {
    -webkit-transform: rotate(-35deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-moz-keyframes openTrash {
  50% {
    -moz-transform: rotate(-35deg);
  }

  100% {
    -moz-transform: rotate(0deg);
  }
}

@keyframes openTrash {
  50% {
    transform: rotate(-35deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Button 8 */

.perspective {
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  display: inline-block;
}

.btn-8 {
  display: block;
  background: #5cbcf6;
  outline: 1px solid transparent;
  /* FF jagged edges fix */
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.btn-8:active {
  background: #55b7f3;
}

/* Button 8a */

.btn-8a:after {
  width: 100%;
  height: 42%;
  /* should be 40% but there's a gap in Chrome Version 34.0.1847.131 */
  left: 0;
  top: -40%;
  background: #49a7df;
  -webkit-transform-origin: 0% 100%;
  -webkit-transform: rotateX(90deg);
  -moz-transform-origin: 0% 100%;
  -moz-transform: rotateX(90deg);
  transform-origin: 0% 100%;
  transform: rotateX(90deg);
}

.btn-8a:hover {
  -webkit-transform: rotateX(-15deg);
  -moz-transform: rotateX(-15deg);
  -ms-transform: rotateX(-15deg);
  transform: rotateX(-15deg);
}

/* Button 8b */

.btn-8b:after {
  width: 100%;
  height: 40%;
  left: 0;
  top: 100%;
  background: #49a7df;
  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotateX(-90deg);
  -moz-transform-origin: 0% 0%;
  -moz-transform: rotateX(-90deg);
  -ms-transform-origin: 0% 0%;
  -ms-transform: rotateX(-90deg);
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
}

.btn-8b:hover {
  -webkit-transform: rotateX(15deg);
  -moz-transform: rotateX(15deg);
  -ms-transform: rotateX(15deg);
  transform: rotateX(15deg);
}

/* Button 8c */

.btn-8c:after {
  width: 21%;
  /* should be 20% but there's a gap in Chrome Version 34.0.1847.131 */
  height: 100%;
  left: -20%;
  top: 0;
  background: #49a7df;
  -webkit-transform-origin: 100% 0%;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: 100% 0%;
  -moz-transform: rotateY(-90deg);
  -ms-transform-origin: 100% 0%;
  -ms-transform: rotateY(-90deg);
  transform-origin: 100% 0%;
  transform: rotateY(-90deg);
}

.btn-8c:hover {
  -webkit-transform: rotateY(15deg);
  -moz-transform: rotateY(15deg);
  -ms-transform: rotateY(15deg);
  transform: rotateY(15deg);
}

/* Button 8d */

.btn-8d:after {
  width: 20%;
  height: 100%;
  left: 100%;
  top: 0;
  background: #49a7df;
  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotateY(90deg);
  -moz-transform-origin: 0% 0%;
  -moz-transform: rotateY(90deg);
  -ms-transform-origin: 0% 0%;
  -ms-transform: rotateY(90deg);
  transform-origin: 0% 0%;
  transform: rotateY(90deg);
}

.btn-8d:hover {
  -webkit-transform: rotateY(-15deg);
  -moz-transform: rotateY(-15deg);
  -ms-transform: rotateY(-15deg);
  transform: rotateY(-15deg);
}

/* Button 8e */

.btn-8e {
  -webkit-transform: rotateX(-15deg);
  -moz-transform: rotateX(-15deg);
  -ms-transform: rotateX(-15deg);
  transform: rotateX(-15deg);
}

.btn-8e:after {
  width: 100%;
  height: 42%;
  /* should be 40% but there's a gap in Chrome Version 34.0.1847.131 */
  left: 0;
  top: -40%;
  background: #49a7df;
  -webkit-transform-origin: 0% 100%;
  -webkit-transform: rotateX(90deg);
  -moz-transform-origin: 0% 100%;
  -moz-transform: rotateX(90deg);
  -ms-transform-origin: 0% 100%;
  -ms-transform: rotateX(90deg);
  transform-origin: 0% 100%;
  transform: rotateX(90deg);
}

.btn-8e:active {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

/* Button 8f */

.btn-8f {
  -webkit-transform: rotateX(15deg);
  -moz-transform: rotateX(15deg);
  -ms-transform: rotateX(15deg);
  transform: rotateX(15deg);
}

.btn-8f:after {
  width: 100%;
  height: 40%;
  left: 0;
  top: 100%;
  background: #49a7df;
  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotateX(-90deg);
  -moz-transform-origin: 0% 0%;
  -moz-transform: rotateX(-90deg);
  -ms-transform-origin: 0% 0%;
  -ms-transform: rotateX(-90deg);
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
}

.btn-8f:active {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

/* Button 8g */

.btn-8g {
  background: #fff;
  color: #999;
}

.btn-8g:active {
  background: #fff;
}

.btn-8g:after,
.btn-8g:before {
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  line-height: 70px;
}

.btn-8g:after {
  top: -98%;
  /* should be -100% but there's a gap in Chrome Version 34.0.1847.131 */
  background: #7aca7c;
  color: #358337;
  content: 'It worked!';
  -webkit-transform-origin: 0% 100%;
  -webkit-transform: rotateX(90deg);
  -moz-transform-origin: 0% 100%;
  -moz-transform: rotateX(90deg);
  -ms-transform-origin: 0% 100%;
  -ms-transform: rotateX(90deg);
  transform-origin: 0% 100%;
  transform: rotateX(90deg);
}

.btn-8g:before {
  top: 100%;
  background: #e96a6a;
  color: #a33a3a;
  content: 'Error!';
  font-weight: 700;
  font-family: 'Lato', Calibri, Arial, sans-serif;
  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotateX(-90deg);
  -moz-transform-origin: 0% 0%;
  -moz-transform: rotateX(-90deg);
  -ms-transform-origin: 0% 0%;
  -ms-transform: rotateX(-90deg);
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
}

.btn-8g.btn-success3d {
  background: #aaa;
  -webkit-transform-origin: 50% 100%;
  -webkit-transform: rotateX(-90deg) translateY(100%);
  -moz-transform-origin: 50% 100%;
  -moz-transform: rotateX(-90deg) translateY(100%);
  -ms-transform-origin: 50% 100%;
  -ms-transform: rotateX(-90deg) translateY(100%);
  transform-origin: 50% 100%;
  transform: rotateX(-90deg) translateY(100%);
}

.btn-8g.btn-error3d {
  background: #aaa;
  -webkit-transform-origin: 50% 0%;
  -webkit-transform: rotateX(90deg) translateY(-100%);
  -moz-transform-origin: 50% 0%;
  -moz-transform: rotateX(90deg) translateY(-100%);
  -ms-transform-origin: 50% 0%;
  -ms-transform: rotateX(90deg) translateY(-100%);
  transform-origin: 50% 0%;
  transform: rotateX(90deg) translateY(-100%);
}

/*
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
	font-family: 'codropsicons';
	src:url('http://creativeholder/fonts/codropsicons/codropsicons.eot');
	src:url('http://creativeholder/fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('http://creativeholder/fonts/codropsicons/codropsicons.woff') format('woff'),
		url('http://creativeholder/fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('http://creativeholder/fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
	font-weight: normal;
	font-style: normal;
}
*/

/* To Navigation Style */

.codrops-top {
  background: #fff;
  background: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  width: 100%;
  font-size: 0.69em;
  line-height: 2.2;
}

.codrops-top a {
  padding: 0 1em;
  letter-spacing: 0.1em;
  color: #888;
  display: inline-block;
}

.codrops-top a:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
}

.codrops-top span.right {
  float: right;
}

.codrops-top span.right a {
  float: left;
  display: block;
}

.codrops-icon:before {
  font-family: 'codropsicons';
  margin: 0 4px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
  content: "\E001";
}

.codrops-icon-prev:before {
  content: "\E004";
}

.codrops-icon-archive:before {
  content: "\E002";
}

.codrops-icon-next:before {
  content: "\E000";
}

.codrops-icon-about:before {
  content: "\E003";
}

.container {
  height: 100%;
  position: relative;
}

.container > section {
  margin: 0 auto;
  padding: 5em 3em;
  text-align: center;
  color: #fff;
}

.container > section p {
  position: relative;
  margin: 0;
  padding: 1em;
  z-index: 1;
}

.container > section p.text {
  font-size: 1.4em;
}

.no-touch .note-touch {
  display: none;
}

.color-1 {
  background: #0e83cd;
}

.color-2 {
  background: #f06060;
}

.color-3 {
  background: #fcd04b;
}

.color-4 {
  background: #2ecc71;
}

.color-5 {
  background: #9e54bd;
}

.color-6 {
  background: #4593e3;
}

.color-7 {
  background: #2ac56c;
}

.color-8 {
  background: #ecf0f1;
}

.color-8 p.text {
  color: #aaa;
  font-weight: bold;
}

@media screen and (max-width: 25em) {
  .codrops-icon span {
    display: none;
  }
}

@font-face {
  font-family: "VW-Head-Bd";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Bold.ttf");
}

@font-face {
  font-family: "VW-Head-Bd";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Bold.eot");
}

@font-face {
  font-family: "VW-Head-Bd";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Bold.woff"), url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Bold.svg#vw-head-Bold") format("svg");
}

@font-face {
  font-family: "VW-Head-BdIt";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-BoldIta.ttf");
}

@font-face {
  font-family: "VW-Head-BdIt";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-BoldIta.eot");
}

@font-face {
  font-family: "VW-Head-BdIt";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-BoldIta.woff"), url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-BoldIta.svg#vw-head-BoldIta") format("svg");
}

@font-face {
  font-family: "VW-Head-ExBd";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-ExtraBold.ttf");
}

@font-face {
  font-family: "VW-Head-ExBd";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-ExtraBold.eot");
}

@font-face {
  font-family: "VW-Head-ExBd";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-ExtraBold.woff"), url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-ExtraBold.svg#vw-head-ExtraBold") format("svg");
}

@font-face {
  font-family: "VW-Head-Lt";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Light.ttf");
}

@font-face {
  font-family: "VW-Head-Lt";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Light.eot");
}

@font-face {
  font-family: "VW-Head-Lt";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Light.woff"), url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Light.svg#vw-head-Light") format("svg");
}

@font-face {
  font-family: "VW-Head-Rg";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Reg.ttf");
}

@font-face {
  font-family: "VW-Head-Rg";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Reg.eot");
}

@font-face {
  font-family: "VW-Head-Rg";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Reg.woff"), url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-Reg.svg#vw-head-Reg") format("svg");
}

@font-face {
  font-family: "VW-Head-RgIt";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-RegIta.ttf");
}

@font-face {
  font-family: "VW-Head-RgIt";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-RegIta.eot");
}

@font-face {
  font-family: "VW-Head-RgIt";
  src: url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-RegIta.woff"), url("//landofsharks.holdrr.com/assets/fonts/vw-head/vw-head-RegIta.svg#vw-head-RegIta") format("svg");
}

.ruler {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #fff;
  align-items: baseline;
  height: 20px;
  margin-bottom: 2px;
  transform: translateZ(0);
  will-change: transform;
}

.ruler dt,
.ruler dd {
  width: 1px;
  background: #fff;
  margin: 0;
  padding: 0;
  border: 0;
}

.ruler dt {
  height: 100%;
}

.ruler dd {
  height: 50%;
}

/*@mixin blue-gradientOld() {
  !* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,002339+100&0+0,1+100 *!
  background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, rgba(0, 35, 57, 1) 100%); !* FF3.6-15 *!
  background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, rgba(0, 35, 57, 1) 100%); !* Chrome10-25,Safari5.1-6 *!
  background: radial-gradient(ellipse at center, rgba(125, 185, 232, 0) 0%, rgba(0, 35, 57, 1) 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#002339', GradientType=1); !* IE6-9 fallback on horizontal gradient *!
}*/

#streetview-map-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #234076;
}

#google-search-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 60px;
  z-index: 8000;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  transition: opacity .25s ease;
}

#google-search-header.hide {
  opacity: 0;
  pointer-events: none;
}

#google-search-header article {
  position: relative;
  display: flex;
  justify-content: row;
  align-items: center;
  height: 100%;
}

#google-search-header article.left {
  float: left;
  margin-left: 20px;
  pointer-events: all;
}

#google-search-header article.middle {
  float: left;
  margin-left: -80px;
  top: 10px;
}

#google-search-header article.right {
  float: right;
  margin-right: 20px;
  pointer-events: none;
}

#google-search-header article.right span {
  opacity: 0;
}

#google-search-header article #back-btn {
  position: relative;
  width: 22px;
  height: 15px;
  top: 2px;
  background: url("//landofsharks.holdrr.com/assets/images/back-arrow.svg") no-repeat;
}

#google-search-header article #los-logo {
  position: relative;
  width: 179px;
  height: 24px;
  background: url("//landofsharks.holdrr.com/assets/images/los-logo-horz.svg") no-repeat;
}

#google-search-header article #dsc-logo {
  position: relative;
  width: 46px;
  height: 46px;
  background: url("//landofsharks.holdrr.com/assets/images/dsc-logo.png") no-repeat;
  background-size: 100%;
  pointer-events: all;
  cursor: pointer;
}

#google-search-header article .share-btn {
  position: relative;
  width: 34px;
  height: 34px;
  pointer-events: all;
  cursor: pointer;
  padding: 0 7px;
}

#google-search-header article .share-btn svg {
  width: 100%;
  height: 100%;
}

#google-search-header article span {
  position: relative;
  height: 42px;
  width: 1px;
  margin: 0 20px;
  background-color: rgba(255, 255, 255, 0.4);
}

#google-search-header article #vw-logo {
  position: relative;
  width: 48px;
  height: 48px;
  background: url("//landofsharks.holdrr.com/assets/images/vw-logo-basic.png") no-repeat;
  background-size: cover;
  pointer-events: all;
  cursor: pointer;
}

#google-search-header article #social-btns {
  position: relative;
  width: 77px;
  height: 32px;
  background: url("//landofsharks.holdrr.com/assets/images/social-media-btns.png");
  opacity: 0;
  pointer-events: none;
}

#map {
  height: 100%;
  z-index: 50;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

#map.activate {
  pointer-events: all;
}

#map.reveal {
  opacity: 0.65 !important;
  transition: opacity .5s ease;
}

/*

#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
  z-index: 3000;
}

#map #infowindow-content {
  display: inline;
  z-index: $z-index-search;
}

#google-search {
pointer-events: all;

  position:absolute;
  box-sizing: border-box;
  -moz-box-sizing: border-box;

  background-color: #000;
  //padding: 20px;

  height: 76px;
  z-index: 1000;
   width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1%;


  #cube-holder{
    position:relative;
    z-index: 5110;
    background-color: none;
    //top: -22px;
    //left: 200px;
    width:100px;
    height:100px;

    &::-moz-selection { color: rgba(0,0,0,0)}
    &::selection { color: rgba(0,0,0,0); }

    canvas{
      position:relative;
      left:-50%;
    }

    div{
      border: 1px solid #fff;
      width: 47px;
      height: 47px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      pointer-events: none;
    }

  }




  .pac-card {
    position: relative;
    //width: 100%;
    display: flex;
    align-items: center;
   // justify-content: space-between;




  }


  h2{
    color: #fff;
    @include promptFont(700, italic, 1px);
    position: relative;
    text-align: center;
    padding: 0 0 0 22px;
  }

  .pac-card section {

  }

  #pac-container {
    width: 400px;
    border: 1px solid #fff;
    z-index: 2000;
    align-items: center;
    position:relative;
    height:50px;
  }

  .pac-controls {

  }

  #shark {
    opacity: 1;
    background: none;
    position: absolute;
    top: initial;
    bottom: 0;
    left: 60%;
    width: 100vw;
    height: 980px;
    transform: translateX(-40%);
    pointer-events: all;
  }

  .pac-controls label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
  }

  #pac-input {
    background-color: rgba(0, 0, 0, 0);
    font-size: 15px;
    font-weight: 300;
    padding-left: 12px;
    padding: 10px;
    text-overflow: ellipsis;
    width: 380px;
    border: 0;
    height:30px;
  }

  #pac-input:focus {
    border-color: #fff;
    color: #fff;
  }

  #pac-input::placeholder {
    color: #fff;
    @include promptFont(800,italic,1px);
  }

  #title {
    color: #fff;
    background-color: #000;
    font-size: 25px;
    //font-weight: 500;
    @include promptFont(800,normal);
    position:relative;
    background: url($CDN+"logo-lockup.png")no-repeat;
    width:330px;
    height:54px;
  }
}

*/

#los-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#los-stage .component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: #fff;
}

#los-stage h1,
#los-stage h2,
#los-stage h3,
#los-stage h4 {
  font-family: 'Prompt', sans-serif;
  font-weight: 900;
  font-style: italic;
}

#los-stage #scroll-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  display: none;
  background: #000;
  background: url("//landofsharks.holdrr.com/assets/images/scroll-bg.jpg") repeat;
}

#los-stage #scroll-container.reveal {
  opacity: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 3000px;
  height: auto;
}

.los-component {
  position: relative;
  min-height: 700px;
  width: 90%;
  overflow: hidden;
  background-color: #002339;
  color: #bcbcbc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.35);
  transition: all .125s ease;
}

.los-component p {
  line-height: 1.5rem;
}

.los-component h1,
.los-component h2,
.los-component h3,
.los-component h4 {
  line-height: 1.5rem;
}

.los-component:first-child {
  -webkit-box-shadow: unset;
  -moz-box-shadow: unset;
  box-shadow: unset;
}

#timelapse-component,
#hotspots-gallery-component,
#video-gallery-component,
#image-gallery-component,
#slider-component,
#outro {
  max-width: 1440px;
}

#sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #121723;
  color: #fff;
  z-index: 2;
  transition: all .25s ease;
}

#sticky-nav.sticky {
  height: 60px;
}

#sticky-nav dl {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  font-size: 22px;
  margin: 0 5%;
}

#sticky-nav dl.center {
  left: 105px;
}

#sticky-nav dl dd,
#sticky-nav dl dt {
  margin: 0;
  padding: 0;
}

#sticky-nav dl dd a,
#sticky-nav dl dt a {
  display: block;
  width: 100%;
  height: 100%;
}

#sticky-nav dl dd h3,
#sticky-nav dl dt h3 {
  font-style: unset;
  font-weight: 700;
  letter-spacing: 2px;
  margin-left: 8px;
  opacity: 0;
  display: none;
  transition: all .25s ease;
}

#sticky-nav dl dd h3.reveal,
#sticky-nav dl dt h3.reveal {
  display: block;
  opacity: 1;
}

#sticky-nav dl dd h3.reveal a,
#sticky-nav dl dt h3.reveal a {
  color: white;
  text-decoration: none;
}

#sticky-nav dl dt#dsc-logo {
  width: 90px;
  height: 80px;
  margin-right: 5px;
  background: url("//landofsharks.holdrr.com/assets/images/DSC-hr-networklogo-105x95.png") no-repeat;
  background-position: 0px -3px;
  background-size: contain;
}

#sticky-nav dl dt#dsc-logo.reveal {
  width: 55px;
  height: 47px;
}

#sticky-nav dl dd#plus-icon {
  height: 33px;
  width: 33px;
  background: url("//landofsharks.holdrr.com/assets/images/header-icon-plus.png") no-repeat;
}

#sticky-nav dl dd.vw-logo {
  width: 50px;
  height: 50px;
  background: url("//landofsharks.holdrr.com/assets/images/header-vw-logo.png") no-repeat;
  background-position: 0px 0px;
  background-size: 100%;
  transition: all .25s ease;
  display: none;
  opacity: 0;
}

#sticky-nav dl dd.vw-logo.reveal {
  display: block;
  opacity: 1;
}

#sticky-nav dl dd.vw-logo-basic {
  width: 40px;
  height: 40px;
  background: url("//landofsharks.holdrr.com/assets/images/vw-logo-basic.png") no-repeat;
  background-position: 0px 0px;
  background-size: 100%;
  transition: all .25s ease;
  display: none;
  opacity: 0;
}

#sticky-nav dl dd.vw-logo-basic.reveal {
  display: block;
  opacity: 1;
}

#sticky-nav dl dd#presented-by {
  font-size: 0.75rem;
  margin: 0 14px;
  color: #fff;
  display: none;
}

#sticky-nav dl dd#presented-by.reveal {
  display: block;
}

#sticky-nav dl dd#nav-los-lockup {
  position: relative;
  width: 218px;
  height: 30px;
  background: url("//landofsharks.holdrr.com/assets/images/los-logo-horizontal.png") no-repeat;
  background-position: 0px 0px;
  opacity: 0;
  background-size: 100%;
  transition: all .25s ease;
}

#sticky-nav dl dd#nav-los-lockup.reveal {
  opacity: 1;
}

#sticky-nav dl.right {
  overflow: hidden;
  color: #8EB3DD;
}

#sticky-nav dl.right dd h4 {
  font-size: 22px;
}

#sticky-nav dl.right dd h4 span {
  color: #fff;
  font-size: 16px;
  padding: 0 16px 0 8px;
}

#sticky-nav dl.right dd#social-links {
  position: relative;
  width: 233px;
  height: 38px;
  background: url("//landofsharks.holdrr.com/assets/images/header-icons-right.png");
}

#sticky-nav dl.right dd#nav-search {
  position: relative;
  width: 320px;
  height: 35px;
  transition: all .25s ease;
}

#sticky-nav dl.right dd#nav-search.show {
  width: 320px;
  margin: 0;
  visibility: visible;
}

#sticky-nav dl.right dd#nav-search.hide {
  width: 0;
  visibility: hidden;
}

#sticky-nav dl.right dd#nav-search .google-search-input {
  height: 100%;
}

#sticky-nav dl.right dd#nav-search .google-search-input .pac-card #pac-container {
  padding-left: 0;
}

#sticky-nav dl.right dd#nav-search .google-search-input .pac-card #pac-container .powered-by-google {
  display: none;
}

#sticky-nav dl.right dd#nav-search .google-search-input .pac-card #pac-container input#pac-input {
  background-color: #00b1eb;
  border-radius: 3px;
  font-size: 0.75rem;
  padding: 2px 10px;
}

#sticky-nav dl.right dd#nav-search .google-search-input .pac-card #pac-container input#pac-input::-webkit-input-placeholder {
  transition: opacity .15s ease;
}

#sticky-nav dl.right dd#nav-search .google-search-input .pac-card #pac-container input#pac-input::-moz-placeholder {
  transition: opacity .25s ease;
}

#sticky-nav dl.right dd#nav-search .google-search-input .pac-card #pac-container input#pac-inputinput:-ms-input-placeholder {
  transition: opacity .15s ease;
}

#sticky-nav dl.right dd#nav-search .google-search-input .pac-card #pac-container input#pac-input.hide::-webkit-input-placeholder {
  opacity: 0;
}

#sticky-nav dl.right dd#nav-search .google-search-input .pac-card #pac-container input#pac-input.hide::-moz-placeholder {
  opacity: 0;
}

#sticky-nav dl.right dd#nav-search .google-search-input .pac-card #pac-container input#pac-input.hide:-ms-input-placeholder {
  opacity: 0;
}

#sticky-nav dl.right dd#nav-search .google-search-input .pac-card #pac-container div.magnifying-icon {
  background-color: transparent;
  padding: 5px 0px;
  transition: all .2s ease;
}

#sticky-nav dl.right dd#nav-search .google-search-input .pac-card #pac-container div.magnifying-icon.hide {
  opacity: 0;
}

#sticky-nav dl.right dd#nav-magnifying-icon {
  width: 0;
  height: auto;
  margin-right: 0;
  overflow: hidden;
  transition: all .25s ease;
}

#sticky-nav dl.right dd#nav-magnifying-icon.reveal {
  width: 40px;
  margin-right: 5px;
}

#streetview-sharks-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

#shark-webgl {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: all .25s ease;
}

#shark-webgl canvas {
  /*
    &:first-child{
      position:absolute;
      left:25%;
      top:25%;
      //pointer-events: all;

      opacity:0;
      pointer-events: none;
      transition: all .25s ease;
      &.reveal{
        opacity:1;
        pointer-events: none;
      }

    }
    &:last-child{
      position:fixed;
      top:0;
      left:0;
    }*/
}

#shark-webgl canvas::selection {
  color: rgba(0, 0, 0, 0);
}

#shark-webgl.allow-events {
  pointer-events: all;
}

#shark-webgl.reveal {
  opacity: 1;
  top: 0px;
  transition: all 1s ease;
}

#streetview-sharks-ui-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
}

#sharks-ui-btns-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* flex-direction: row; */
  z-index: 8000;
  pointer-events: none;
  opacity: 0;
  transition: all .5s ease;
}

#sharks-ui-btns-holder.reveal {
  opacity: 1;
  transition: all .5s ease;
}

#sharks-ui-btns-holder.default #shark-back-btn {
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: all .25s ease;
}

#sharks-ui-btns-holder.zoom-in #shark-btns {
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: all .25s ease;
}

#sharks-ui-btns-holder #shark-back-btn {
  position: absolute;
  left: 35px;
  top: 60px;
  color: #fff;
  font-size: 18px;
  font-family: "Prompt", Helvetica, sans-serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 1px;
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
  transition: all .25s ease;
}

#sharks-ui-btns-holder #free-swim {
  border-width: 1.5px;
  border-color: white;
  border-style: solid;
  border-radius: 4px;
  font-size: 12px;
  color: white;
  width: 100px;
  text-align: center;
  align-self: center;
  position: absolute;
  bottom: 145px;
  cursor: pointer;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

#sharks-ui-btns-holder #free-swim.activate {
  opacity: 1;
  pointer-events: all;
}

#sharks-ui-btns-holder #free-swim p {
  pointer-events: none;
}

#sharks-ui-btns-holder #free-swim.hide {
  opacity: 0;
  pointer-events: none;
}

#sharks-ui-btns-holder #free-swim.hide.activate {
  opacity: 0;
  pointer-events: none;
}

#sharks-ui-btns-holder #shark-btns {
  /* position: relative;
      top: 0;
      left: 0;
      width: 34%;
      min-width: 300px;
      height: 60%;

      opacity: 1;
      pointer-events: none;
      //background-color: rgba(112,113,142,.4);
      display: flex;
      justify-content: space-evenly;
      transition: all .25s ease;
      flex-direction: column;
      //display:none;*/
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all .5s linear;
}

#sharks-ui-btns-holder #shark-btns.hide {
  pointer-events: none;
  opacity: 0;
}

#sharks-ui-btns-holder #shark-btns #plus-btn-1 {
  align-self: center;
  position: absolute;
  top: 50%;
  left: 20%;
}

#sharks-ui-btns-holder #shark-btns #plus-btn-2 {
  position: absolute;
  top: 30%;
  left: 50%;
}

#sharks-ui-btns-holder #shark-btns #plus-btn-3 {
  position: absolute;
  top: 50%;
  right: 20%;
  align-self: flex-end;
}

#sharks-ui-btns-holder #shark-btns .plus-btn {
  width: 60px;
  height: 60px;
  cursor: pointer;
  pointer-events: all;
  /* g circle.blue-circle {
          z-index: -1;
          fill: RGBA(14, 178, 227, 0);

        }*/
}

#sharks-ui-btns-holder #shark-btns .plus-btn .st0 {
  fill: RGBA(14, 178, 227, 1);
}

#sharks-ui-btns-holder #shark-btns .plus-btn:hover {
  /*
          g circle.blue-circle {
            fill: RGBA(14, 178, 227, 1.00);
            transition: all .25s ease;

          }*/
  transition: all .25s ease;
}

#streetview-water-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#streetview-gradient-overlay-old {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("//landofsharks.holdrr.com/assets/images/water-gradient.png") no-repeat;
  background-size: cover;
  z-index: 400;
  pointer-events: none;
}

#water-holder {
  position: absolute;
  top: -100px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 400;
}

#water-holder.reveal {
  opacity: .35;
  transition: .25s ease;
}

#water-caustics {
  position: absolute;
  top: -100px;
  opacity: 0;
  z-index: 400;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #0072ff 10%, rgba(0, 0, 0, 0) 35%);
  mask-image: linear-gradient(to bottom, #0072ff 10%, rgba(0, 0, 0, 0) 35%);
}

#water-caustics.reveal {
  opacity: .25;
  transition: all 2s ease;
}

.dg {
  display: none;
  pointer-events: none;
  opacity: 0;
}

iframe.caustics {
  -webkit-mask-image: linear-gradient(to bottom, #0072ff 10%, transparent 35%);
  opacity: .25;
}

#water-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, RGBA(6, 34, 55, 0) 36%, RGBA(6, 34, 55, 0.69) 80%, RGBA(6, 34, 55, 1) 100%);
}

#water-gradient.reveal {
  opacity: 1;
  transition: all 1s ease;
}

#water-mobile {
  position: absolute;
  width: 100%;
  height: 100%;
  /*background: url($CDN+"water-overlay-16x9.jpg")no-repeat;*/
  /*background-size:cover;*/
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: hard-light;
  background-color: #5C99AF;
}

#water-mobile.reveal {
  opacity: .5;
  transition: all 1s ease;
}

#water-gradient-old {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  opacity: 0;
  pointer-events: none;
  background-color: darkslateblue;
  display: none;
}

#water-gradient-old .intro {
  width: 80%;
  max-width: 30rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin: 0 auto 1em;
  text-transform: capitalize;
  text-align: center;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}

#water-gradient-old .intro small {
  display: block;
  opacity: .5;
  font-style: italic;
  text-transform: none;
}

#water-gradient-old .info {
  position: absolute;
  bottom: 1em;
  right: 1em;
  font-size: .9em;
  font-style: italic;
  font-family: serif;
  text-align: right;
  opacity: .5;
}

#water-gradient-old .info a {
  color: inherit;
}

@keyframes fadeout-color {
  0% {
    background-color: RGBA(0, 35, 57, 1);
  }

  60% {
    background-color: RGBA(0, 35, 57, 0);
  }

  100% {
    background-color: RGBA(0, 35, 57, 0);
  }
}

@keyframes gradient-fadeout {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 1;
  }

  /*75%{
    opacity:.8;
    transform:scale(12);
  }*/
  100% {
    opacity: .4;
    transform: scale(12);
  }
}

@keyframes ambient {
  0% {
    opacity: .5;
  }

  50% {
    opacity: .8;
  }

  100 {
    opacity: .5;
  }
}

@keyframes slidein {
  0% {
    top: -43px;
    filter: blur(0);
  }

  20% {
    top: -43px;
    filter: blur(1px);
  }

  80% {
    filter: blur(3px);
  }

  90% {
    filter: blur(0px);
  }

  95% {
    transform: scale(1);
  }

  100% {
    filter: blur(0);
    top: -1307px;
  }
}

@keyframes adjust-height {
  0% {
    height: 100px;
  }

  100% {
    height: 500px;
  }
}

@keyframes scale-down {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  60% {
    transform: translate(-50%, -50%) scale(0.5);
  }

  95% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
}

@keyframes wipein {
  0% {
    width: 0;
    opacity: .3;
    transform: translateZ(0);
    will-change: transform;
  }

  100% {
    width: 300px;
    opacity: 1;
    transform: translateZ(0);
    will-change: transform;
  }
}

@keyframes wipein-shark {
  0% {
    width: 0;
    opacity: .3;
    transform: translateZ(0);
    will-change: transform;
  }

  100% {
    width: 100%;
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadein-end {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes height-adjust {
  0% {

  }

  25% {
    height: fit-content;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes background-fadein {
  0% {
    background-color: RGBA(0, 35, 57, 1);
  }

  100% {
    background-color: RGBA(0, 35, 57, 0.7);
  }
}

#streetview-preloader-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: 0;
}

#streetview-preloader-holder.active {
  opacity: 1;
  pointer-events: none;
}

#streetview-preloader {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8500;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  color: #fff;
  pointer-events: none;
  background-color: RGBA(0, 35, 57, 1);
  animation: fadeout-color 7s ease 1.5s forwards;
}

#streetview-preloader #preloader-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(0, 35, 57, 0) -17%, #002339 10%);
  animation: gradient-fadeout 7s linear 1.5s forwards;
}

#streetview-preloader section {
  position: relative;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  font-family: "Prompt", Helvetica, sans-serif;
  font-weight: 100;
  font-style: normal;
  letter-spacing: 0;
}

#streetview-preloader section .epochs {
  position: absolute;
  width: fit-content;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: scale-down 4s ease 5.75s forwards;
}

#streetview-preloader section .epochs p#line-2 {
  position: relative;
  left: 70px;
  top: -52px;
  font-size: 18px;
  animation: fadein 2.6s ease 4.2s normal forwards;
}

#streetview-preloader section .epochs div.location-line {
  position: relative;
  font-size: 48px;
  font-family: "Prompt", Helvetica, sans-serif;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 2px;
  width: 90vw;
  max-width: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 1;
}

#streetview-preloader section .epochs div.location-line h2,
#streetview-preloader section .epochs div.location-line h5 {
  margin: 0;
  padding: 0;
  font-family: "Prompt", Helvetica, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 4px;
  opacity: 0;
  line-height: 120%;
  animation: fadein 1.5s ease 6s forwards;
  letter-spacing: 0;
}

#streetview-preloader section .epochs div.location-line h5 {
  font-size: 44px;
  text-align: center;
  letter-spacing: 0;
}

#streetview-preloader section .epochs div.location-line h2 {
  font-family: "Prompt", Helvetica, sans-serif;
  font-weight: 1000;
  font-style: italic;
  letter-spacing: 4px;
  text-transform: uppercase;
}

#streetview-preloader section .epochs div.location-line p {
  line-height: 120%;
}

#streetview-preloader section .epochs header {
  position: relative;
  text-align: center;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
  float: left;
}

#streetview-preloader section .epochs header div.color {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 1000;
  background: url("//landofsharks.holdrr.com/assets/images/numbers-gradient.png");
  background-repeat: repeat-x;
  background-size: contain;
}

#streetview-preloader section .epochs header ul {
  position: relative;
  top: -43px;
  text-transform: uppercase;
  padding: 0;
  line-height: 60px;
  animation-duration: 4s;
  animation-delay: 1.25s;
  animation-name: slidein;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  z-index: -1;
}

#streetview-preloader section ul {
  list-style: none;
}

#streetview-preloader section article {
  position: relative;
  transform: translateZ(0);
  will-change: transform;
  /*  opacity:.5;
      animation: ambient 2.5s ease $startSharkName;
      animation-iteration-count: infinite;*/
  /*
      &#shark{
        left: 50%;
        transform: translateX(-50%);
        width:50%;
        //background:orange;
        //opacity:.5;

        animation: fadein 3s ease $startShark forwards;
        opacity:0;
        img{
          animation: ambient 2s linear infinite;
          opacity:.5;

          width:100%;

        }
        .wipe-ruler{
          position:relative;
          width:0;
          overflow:hidden;
          animation: wipein-shark 2s ease $startRuler normal forwards;

          p{
            position: relative;
            padding: 0;
            margin: 0;
            float: right;
          }
          svg{
            width:41%;
            position: relative;
            transform: rotate(12deg);
            //top: -22px;
            opacity: .4;

          }


        }




      }*/
}

#streetview-preloader section article.shark-lockup {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

#streetview-preloader section article.shark-lockup h1,
#streetview-preloader section article.shark-lockup h2,
#streetview-preloader section article.shark-lockup h3,
#streetview-preloader section article.shark-lockup h4,
#streetview-preloader section article.shark-lockup h5 {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Prompt", Helvetica, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 2px;
  line-height: 120%;
}

#streetview-preloader section article.shark-lockup h1 {
  font-size: 3.375rem;
  letter-spacing: 6px;
  opacity: 0;
  text-transform: uppercase;
  animation: fadein 2.5s ease 9.65s forwards;
}

#streetview-preloader section article.shark-lockup h3 {
  opacity: 0;
  animation: fadein 2.5s ease 9.65s forwards;
}

#streetview-preloader section article.shark-lockup p {
  opacity: 0;
  animation: fadein-end 1s ease 9.75s forwards;
  font-family: 'Titillium Web', sans-serif;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 140%;
  margin: 0;
  padding: 0 10vw;
  max-width: 600px;
  text-align: center;
}

#streetview-preloader section article.shark-lockup div.shark-art {
  position: relative;
  text-align: center;
  opacity: 0;
  animation: fadein 1s ease 9.5s forwards;
}

#streetview-preloader section article.shark-lockup div.shark-art img {
  /*width: 30vw;
            max-width: 500px;
            min-width: 300px;*/
  width: 12vw;
  max-width: 220px;
  min-width: 190px;
}

#streetview-preloader section article.shark-lockup .shark-title h1 {
  text-transform: uppercase;
  margin-bottom: 20px;
}

#streetview-preloader section article.shark-lockup header {
  position: relative;
  text-align: center;
  opacity: 0;
  animation: fadein 1s ease 6s forwards;
  margin-bottom: 14px;
}

#streetview-preloader section article.shark-lockup header h5 {
  font-size: 14px;
}

#streetview-preloader section article.shark-lockup header h2 {
  font-size: 34px;
  text-transform: uppercase;
}

#streetview-preloader section article.geo {
  position: relative;
  width: 350px;
  height: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 20px 0 0 0;
  animation: fadeout 2s ease 5s forwards;
}

#streetview-preloader section article.geo div.wipe {
  position: relative;
  float: left;
  max-width: 172px;
  animation-duration: 1s;
  width: 0;
  overflow: hidden;
  animation-delay: 1.5s;
  animation-name: wipein;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  height: 22px;
}

#streetview-preloader section article.geo div.wipe.wipe-2 {
  animation-delay: 1.75s;
}

#streetview-preloader section article.geo p {
  margin: 0;
  padding: 0;
  font-weight: 400;
  color: #ccc;
}

#streetview-preloader section article.geo p span {
  color: #fff;
  font-weight: 100;
}

#streetview-preloader.start article {
  opacity: 0;
  top: 0;
  transition: all .5s ease;
}

#streetview-preloader.reveal article {
  top: 0%;
  opacity: 0;
  transition: all .5s ease;
}

#streetview-preloader.reveal-info-preloader {
  opacity: 1;
}

#streetview-preloader.reveal-info-preloader article {
  opacity: 1;
}

#streetview-preloader.slide-out {
  opacity: 0;
  transition: all 4s ease;
}

#streetview-footer {
  color: #fff;
  font-size: 16px;
  pointer-events: none;
  position: absolute;
  bottom: 20px;
  height: 40px;
  width: 97%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 8000;
  transition: all .25s ease;
  opacity: 0;
}

#streetview-footer.reveal {
  opacity: 1;
}

#streetview-footer dl {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  cursor: pointer;
  pointer-events: all;
}

#streetview-footer dl.search-bar {
  pointer-events: none;
}

#streetview-footer dl dd {
  margin: 0;
  margin-left: 10px;
  text-transform: uppercase;
}

#streetview-footer dt#info-icon {
  position: relative;
  width: 34px;
  height: 34px;
  background: url("//landofsharks.holdrr.com/assets/images/info-icon-v1.svg") no-repeat;
}

#streetview-component {
  z-index: -111;
  overflow: hidden;
}

#streetview-component #reflow-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #002339;
  z-index: 2000;
}

#streetview-component.active {
  z-index: 100;
}

#streetview-component #streetview-holder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes animRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#hotspots-generator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  pointer-events: all;
  z-index: -1;
}

div.hotspot-circles {
  width: 300px;
  height: 300px;
  /*display: none;*/
  position: relative;
  /*.arc1-path, .arc2-path{
    fill:#fff;
  }*/
}

div.hotspot-circles .arc1-path {
  transform-origin: center;
  animation: animRotate 16s linear infinite;
  background-color: transparent;
  border: 1px solid white;
  border-left: none;
  border-top: none;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

div.hotspot-circles .arc2-path {
  transform-origin: center;
  animation: animRotate 16s linear infinite;
  animation-direction: reverse;
  background-color: transparent;
  border: 1px solid white;
  border-left: none;
  border-top: none;
  border-radius: 50%;
  width: 86%;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 7%;
}

dl.dots-ruler {
  position: relative;
  color: #fff;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all .25s ease;
}

dl.dots-ruler dt,
dl.dots-ruler dd {
  margin: 0;
  padding: 0;
}

dl.dots-ruler dt:first-child {
  margin-right: 4px;
}

dl.dots-ruler dt:last-child {
  margin-left: 1px;
}

dl.dots-ruler dd.dot-holder {
  position: relative;
  font-size: 18px;
  letter-spacing: 4px;
  height: 100%;
  top: 4px;
  max-width: 90vw;
  overflow: hidden;
}

dl.dots-ruler dt {
  position: relative;
  width: 1px;
  height: 100%;
  background: #fff;
}

#hotspots-generator.mouth svg {
  width: 40vw;
}

#hotspots-generator.mouth .hotspot-circles {
  width: 40vw;
  height: 40vw;
  margin-top: -10vw;
  margin-left: -2vw;
}

#hotspots-generator.fin .hotspot-circles {
  width: 30vw;
  height: 30vw;
  margin-top: -12vw;
}

#modal-window,
#modal-extras-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #002339;
  pointer-events: none;
  z-index: 8600;
  opacity: 0;
  transition: all .5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

#modal-window .close-btn,
#modal-extras-view .close-btn {
  position: absolute;
  right: 7px;
  top: 7px;
  cursor: pointer;
  width: 50px;
}

#modal-window.reveal,
#modal-extras-view.reveal {
  opacity: 1;
  pointer-events: all;
}

#modal-window.reveal-social,
#modal-extras-view.reveal-social {
  opacity: 1;
}

#modal-window.reveal-social .close-btn,
#modal-extras-view.reveal-social .close-btn {
  opacity: 0;
  pointer-events: none;
}

#modal-info,
#modal-credits {
  position: relative;
  display: flex;
  justify-content: column;
  flex-direction: column;
  align-items: center;
  align-content: center;
  text-align: center;
  width: 85%;
  max-width: 700px;
}

#modal-info .rule,
#modal-credits .rule {
  position: relative;
  width: 500px;
  height: 2px;
  background: azure;
}

#modal-info .creditsRule,
#modal-credits .creditsRule {
  display: none;
}

#modal-info h1.creditsHeader,
#modal-credits h1.creditsHeader {
  max-width: 500px;
  width: 90%;
  text-align: left;
  padding-left: 45%;
  padding-bottom: 50px;
}

#modal-info ul,
#modal-credits ul {
  list-style-type: none;
}

#modal-info ul.creditsList,
#modal-credits ul.creditsList {
  padding: 0;
  max-width: 500px;
  width: 100%;
}

#modal-info ul.creditsList:after,
#modal-credits ul.creditsList:after {
  clear: both;
}

#modal-info ul.creditsList li,
#modal-credits ul.creditsList li {
  float: left;
  width: 50%;
}

#modal-info ul.creditsList li dl,
#modal-credits ul.creditsList li dl {
  width: 100%;
}

#modal-info ul.creditsList li dl dt,
#modal-credits ul.creditsList li dl dt {
  min-width: 20px;
  max-width: 20px;
  margin: 0;
}

#modal-info ul.creditsList li dl dd,
#modal-credits ul.creditsList li dl dd {
  max-height: 60px;
  padding: 0 10px;
  box-sizing: border-box;
}

#modal-info ul.creditsList li dl dd p.pub,
#modal-credits ul.creditsList li dl dd p.pub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#modal-info ul li,
#modal-credits ul li {
  line-height: 200%;
  letter-spacing: 1px;
  cursor: pointer;
  pointer-events: all;
}

#modal-info ul li dl,
#modal-credits ul li dl {
  display: flex;
  flex-direction: row;
  width: 400px;
}

#modal-info ul li dl dt,
#modal-credits ul li dl dt {
  width: 30px;
  margin: 0 8px 0 0;
  background: url("//landofsharks.holdrr.com/assets/images/footnote.svg") no-repeat;
}

#modal-info ul li dl dd,
#modal-credits ul li dl dd {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#modal-info ul li dl dd p,
#modal-credits ul li dl dd p {
  margin: 0;
  padding: 0;
  text-align: left;
  line-height: 120%;
}

#modal-info ul a,
#modal-credits ul a {
  color: #ccc;
}

#modal-info .shark-art,
#modal-credits .shark-art {
  position: relative;
  width: 35%;
}

#modal-info .shark-title h1,
#modal-credits .shark-title h1 {
  text-transform: uppercase;
}

#modal-info img,
#modal-credits img {
  width: 100%;
}

#modal-info hr,
#modal-credits hr {
  border: 1px solid #fff;
  position: relative;
  margin: 12px 0;
}

#modal-info p,
#modal-credits p {
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 140%;
  margin: 0;
  padding: 0;
}

#modal-info p.pub,
#modal-credits p.pub {
  font-style: italic;
}

#landingpage-component {
  position: relative;
  width: 100%;
  /*  margin-bottom: -52px;
  height: 700px;*/
  margin-bottom: -34px;
  height: 98vh;
  background-color: #246f85;
}

#landingpage-component video {
  position: relative;
  object-position: center;
  object-fit: cover;
  z-index: 0;
}

#landingpage-component.los-component {
  min-height: initial;
  background: #2d7886;
  background: -moz-linear-gradient(top, #2d7886 0%, #398c97 27%, #3f939a 37%, #2d4357 100%);
  background: -webkit-linear-gradient(top, #2d7886 0%, #398c97 27%, #3f939a 37%, #2d4357 100%);
  background: linear-gradient(to bottom, #2d7886 0%, #398c97 27%, #3f939a 37%, #2d4357 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d7886', endColorstr='#2d4357',GradientType=0 );
  /* IE6-9 */
}

#landingpage-component #landing-preloader-view {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

#landingpage-component #landing-preloader-view #preloader-svg-fin {
  width: 100px;
  height: 100px;
}

#landingpage-component #landingpage-lockup {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  opacity: 0;
}

#landingpage-component #landingpage-lockup.reveal {
  opacity: 1;
}

#landingpage-component #landingpage-lockup div#logo {
  text-align: center;
}

#landingpage-component #landingpage-lockup div#logo p {
  font-size: 0.75rem;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  opacity: 0;
  display: none;
  transition: all .25s ease;
}

#landingpage-component #landingpage-lockup div#logo p.reveal {
  opacity: 1;
}

#landingpage-component #landingpage-lockup article#text {
  text-align: center;
  position: absolute;
  top: 34vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  opacity: 0;
  transition: all .5s ease;
}

#landingpage-component #landingpage-lockup article#text h1 {
  font-size: 4.8vh;
  padding: 0;
  line-height: 100%;
}

#landingpage-component #landingpage-lockup article#text p {
  font-size: 2vh;
  line-height: 1.5em;
  overflow: hidden;
  margin: 2vh 0;
}

#landingpage-component #landingpage-lockup article#text.reveal {
  opacity: 1;
}

#landingpage-component .landscape {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /*   background-image: url($CDN+"masthead-landscape1.png");
   background-repeat: no-repeat;
   background-size: 178vh 49vh;
   background-position: center bottom;*/
  transition: all .25s ease;
}

#landingpage-component .landscape.reveal {
  opacity: .75;
}

#landingpage-component .landscape img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#landingpage-component #logo-animation-view {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 4%;
  left: 0;
  color: #fff;
  /*display:flex;
    align-items: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;*/
  z-index: 1;
}

#landingpage-component #logo-animation-view canvas {
  position: absolute;
  /* This one fixes the IE positioning bug */
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 64vh;
  max-width: 804px;
  height: auto;
  padding: 0;
  margin: 0;
}

#landingpage-component #logo-animation-view ol {
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

#landingpage-component #logo-animation-view ol li {
  list-style-type: none;
  width: 50%;
  height: 50%;
  text-align: center;
}

#landingpage-component #logo-animation-view .los-images {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#landingpage-component #logo-animation-view .los-images img {
  position: absolute;
  /* This one fixes the IE positioning bug */
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 64vh;
  max-width: 804px;
  height: auto;
  padding: 0;
  margin: 0;
}

#landingpage-component #logo-animation-view .los-images .current-image {
  visibility: visible;
  width: 64vh;
}

#landingpage-component #logo-animation-view .los-images .previous-image {
  visibility: hidden;
  width: 0;
}

#landingpage-component #logo-animation-view .los-images .static-image {
  opacity: 0;
  transition: all .3s ease;
}

#landingpage-component #logo-animation-view .los-images .static-image.reveal {
  opacity: 1;
}

#landingpage-component #logo-animation-view article#text {
  text-align: center;
  opacity: 0;
  position: absolute;
  top: 34vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  transition: all .5s ease;
}

#landingpage-component #logo-animation-view article#text h1 {
  font-size: 4.8vh;
  padding: 0;
  line-height: 100%;
  margin: 0;
}

#landingpage-component #logo-animation-view article#text p {
  font-size: 2vh;
  line-height: 1.5em;
  overflow: hidden;
  margin: 2vh 0;
}

#landingpage-component #logo-animation-view article#text.reveal {
  opacity: 1;
}

#landingpage-component #logo-animation-view #landing-search {
  position: absolute;
  top: 56vh;
  left: 50%;
  transform: translateX(-50%);
}

.pac-container {
  z-index: 8100;
}

#landing-search {
  position: relative;
  width: 400px;
  max-width: 90%;
  height: 54px;
  border-radius: 6.2px;
  background-color: RGBA(1, 26, 44, 1);
  pointer-events: all;
  z-index: 8000;
  opacity: 0;
  transition: all .25s ease;
}

#landing-search.reveal {
  opacity: 1;
  transition: all .25s ease;
}

#landing-search.reveal.hide-landing {
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

#landing-search.hide-landing {
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

#streetview-search {
  position: relative;
  top: -50px;
  width: 400px;
  max-width: 100%;
  height: 54px;
  border-radius: 6.2px;
  background-color: RGBA(1, 26, 44, 1);
  pointer-events: all;
  z-index: 8000;
  opacity: 0;
  transition: all .25s ease;
}

#streetview-search.reveal {
  opacity: 1;
  transition: all .25s ease;
}

#streetview-search.reveal.hide-landing {
  z-index: -1;
  display: none;
}

#streetview-search.active {
  top: -190px;
  transition: all .25s ease;
}

.google-search-input #infowindow-content .title {
  font-weight: bold;
}

.google-search-input #infowindow-content {
  display: none;
}

.google-search-input #infowindow-content {
  display: inline;
}

.google-search-input .pac-card {
  position: relative;
  display: flex;
  align-items: center;
}

.google-search-input #pac-container {
  width: 100%;
  padding-left: 2%;
  align-items: center;
  position: relative;
  height: 50px;
  z-index: 8100;
}

.google-search-input .powered-by-google {
  position: relative;
  width: 100%;
  height: 40px;
  top: 50px;
  background: url("//landofsharks.holdrr.com/assets/images/powered_by_google_on_non_white_hdpi.png") no-repeat;
  background-size: 43%;
  background-position: center;
}

.google-search-input div.magnifying-icon {
  position: relative;
  float: right;
  padding: 14px 6px 0 0;
  background-color: transparent;
  pointer-events: none;
  width: 40px;
}

.google-search-input div.magnifying-icon.hide {
  opacity: 0;
}

.google-search-input div.magnifying-icon svg {
  position: relative;
  left: 10px;
}

.google-search-input .pac-controls label {
  font-size: 13px;
  font-weight: 300;
}

.google-search-input #pac-input {
  position: absolute;
  background-color: rgba(0, 0, 0, 0);
  font-size: 16px;
  font-weight: 300;
  padding-left: 12px;
  padding: 10px;
  text-overflow: ellipsis;
  width: 93%;
  border: 0;
  height: 30px;
  color: #ccc;
  outline: none;
  font-family: "VW-Head-Rg", Helvetica, sans-serif;
}

.google-search-input #pac-input:focus {
  border-color: #fff;
  color: #fff;
}

.google-search-input #pac-input::placeholder {
  color: #fff;
  font-family: "VW-Head-Rg", Helvetica, sans-serif;
}

#slider-component {
  position: relative;
  height: auto;
  background-color: #fff;
  background-image: linear-gradient(#fff, #a5abb0);
  color: #9eaab0;
}

#slider-component #shark-view-360 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

#slider-component #shark-view-360 .rotation-icon {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -57%);
  width: 4vw;
  height: 4vw;
  z-index: 1;
  opacity: 0;
  transition: all .5s ease;
}

#slider-component #shark-view-360 .rotation-icon.show {
  opacity: 1;
}

#slider-component #shark-view-360 #suv-scale-figure {
  width: 30%;
  position: absolute;
  left: 50%;
  top: 83%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: all .5s ease;
}

#slider-component #shark-view-360 #suv-scale-figure.show {
  opacity: 1;
}

#slider-component #shark-view-360 #stetha .shark-images {
  width: 22%;
  top: 48%;
}

#slider-component #shark-view-360 #godzilla .shark-images {
  width: 50%;
  top: 35%;
}

#slider-component #shark-view-360 h4 {
  text-align: center;
  padding: 0 5%;
  z-index: 0;
}

#slider-component #slider-header {
  position: relative;
  top: 0;
}

#slider-component #slider-header h2 {
  margin: 5% auto 5%;
  text-align: center;
  color: #011a2c;
  font-size: 1.375rem;
  margin: 60px 0 20px 0;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

#slider-component #slider-header h2.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#slider-component #slider-header p {
  text-align: center;
  margin-bottom: 50px;
  width: 90%;
  margin: 0 auto;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

#slider-component #slider-header p.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .25s;
  /* Safari */
  transition-delay: .25s;
}

#slider-component #slider {
  display: block;
  position: relative;
  height: 20px;
  width: 30vw;
  margin: 2rem auto 1rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

#slider-component #bar {
  display: flex;
  display: -webkit-flex;
  height: 100%;
  position: relative;
  align-items: center;
  align-content: center;
  opacity: 0;
  transition: all .5s ease;
}

#slider-component #bar.show {
  opacity: 1;
}

#slider-component #bar .dot {
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9d0d2;
  z-index: 2;
  cursor: pointer;
}

#slider-component #bar .line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  z-index: 1;
  background: #c9d0d2;
}

#slider-component .shark-small-scale {
  width: 15%;
  height: auto;
  margin: 0 10%;
  user-select: none;
  cursor: pointer;
  opacity: 0;
  -webkit-transform: translate3d(-20px, 0, 0);
  transform: translate3d(-20px, 0, 0);
  transition: all .5s ease;
}

#slider-component .shark-small-scale.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .25s;
  /* Safari */
  transition-delay: .25s;
}

#slider-component .shark-big-scale {
  width: 30%;
  height: auto;
  margin: 0 10%;
  user-select: none;
  cursor: pointer;
  opacity: 0;
  -webkit-transform: translate3d(20px, 0, 0);
  transform: translate3d(20px, 0, 0);
  transition: all .5s ease;
}

#slider-component .shark-big-scale.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .25s;
  /* Safari */
  transition-delay: .25s;
}

#slider-component #knob {
  position: absolute;
  margin-left: -21px;
  top: 50%;
  transform: translateY(-50%);
  height: 42px;
  width: 42px;
  z-index: 3;
}

#slider-component #knob svg {
  position: absolute;
  top: 0;
  left: 0;
}

#slider-component #knob .knob-outline {
  width: 0;
  height: 0;
  opacity: 0;
  transition: all .25s ease;
}

#slider-component #knob .knob-outline.show {
  width: 100%;
  height: 100%;
  opacity: 1;
}

#slider-component p.shark-title {
  width: 100%;
  text-align: center;
  font-weight: 600;
  z-index: -1;
  margin: 15px 0 15px -2%;
  padding: 0;
}

.line-scale-view {
  position: relative;
  width: 2px;
  height: 32px;
  background: url("//landofsharks.holdrr.com/assets/images/dot-pattern.png") repeat-x;
  opacity: 0;
  transition: all .5s ease;
}

.line-scale-view.shark-line-top {
  margin-top: 30%;
}

.line-scale-view.vw-line-top {
  margin-top: 3%;
}

.line-scale-view.show {
  opacity: 1;
}

.line-scale-view .line-flush-left {
  position: absolute;
  height: 100%;
  width: 1px;
  left: 0;
  top: 0;
  background: #fff;
}

.line-scale-view .line-flush-right {
  position: absolute;
  height: 100%;
  width: 1px;
  right: 0;
  top: 0;
  background: #fff;
}

.line-scale-view div.text {
  position: absolute;
  min-width: 165px;
  right: -170px;
  text-align: left;
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
  line-height: 100%;
  padding: 0;
  margin: 0;
}

.line-scale-view div.text p {
  margin: 3px 0;
  padding: 0;
  line-height: unset;
}

.three-sixty-shark-viewer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all .25s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.three-sixty-shark-viewer.reveal {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

.three-sixty-shark-viewer.show {
  opacity: 1;
}

.three-sixty-shark-viewer ol {
  width: 100%;
  list-style: none;
}

.three-sixty-shark-viewer ol li {
  list-style-type: none;
}

.three-sixty-shark-viewer .shark-images {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
  width: 65%;
  height: auto;
  padding: 0;
  margin: 0;
  user-select: none;
}

.three-sixty-shark-viewer .shark-images img {
  position: absolute;
  /* This one fixes the IE positioning bug */
  top: 0;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

.three-sixty-shark-viewer .shark-images img.megladon-scale {
  width: 135%;
  position: absolute;
  left: 50%;
  top: -10%;
  transform: translate(-50%, -10%);
}

.three-sixty-shark-viewer .shark-images img.ptychodus-scale {
  width: 125%;
  left: 50%;
  top: -10%;
  transform: translate(-50%, -10%);
}

.three-sixty-shark-viewer .shark-images img.helicoprion-scale {
  width: 105%;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}

.three-sixty-shark-viewer .shark-images img.cretoxyrhina-scale {
  width: 80%;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}

.three-sixty-shark-viewer .shark-images img.scissors-scale {
  width: 65%;
  left: 50%;
  top: 20%;
  transform: translate(-50%, 20%);
}

.three-sixty-shark-viewer .shark-images img.godzilla-scale {
  width: 50%;
  left: 50%;
  top: 25%;
  transform: translate(-50%, 25%);
}

.three-sixty-shark-viewer .shark-images img.stetha-scale {
  width: 45%;
  left: 50%;
  top: 35%;
  transform: translate(-50%, 35%);
}

.three-sixty-shark-viewer .shark-images .current-image {
  visibility: visible;
  width: 100%;
}

.three-sixty-shark-viewer .shark-images .previous-image {
  visibility: hidden;
  width: 0;
}

.three-sixty-shark-viewer .shark-images {
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.three-sixty-shark-viewer .shark-images:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.three-sixty-shark-viewer .rotation-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4vw;
  height: 4vw;
}

.three-sixty-shark-viewer .rotation-icon.hide {
  transition: all .25s ease;
  opacity: 0;
}

.carousel-view {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-view .wrapper {
  position: relative;
  margin: 40px 0 20px;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.carousel-view .wrapper .carousel-item {
  position: relative;
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

.carousel-view .wrapper .carousel-item.disable {
  pointer-events: none;
}

.carousel-view .wrapper .carousel-item.enable {
  pointer-events: all;
}

.carousel-view .wrapper .carousel-item .header {
  position: absolute;
  color: #fff;
  text-align: center;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.carousel-view .wrapper .carousel-item .header h3 {
  font-size: 1.5rem;
  margin: 12% auto 6%;
}

.carousel-view .wrapper .carousel-item .header h4 {
  font-size: 3.75rem;
  margin: 6% auto 8%;
}

.carousel-view .wrapper .carousel-item .thumbnail {
  width: 82%;
  height: auto;
  cursor: pointer;
  position: relative;
}

.carousel-view .wrapper .carousel-item .thumbnail video,
.carousel-view .wrapper .carousel-item .thumbnail img {
  width: 100%;
  height: auto;
  -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.4);
  box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.4);
}

.carousel-view .wrapper .carousel-item .thumbnail p {
  text-align: center;
  white-space: normal;
  word-break: break-word;
  color: #7c878e;
  padding: 0 2%;
  margin: 25px 0;
}

.carousel-view .wrapper .carousel-item .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
  height: 15%;
  -webkit-box-shadow: unset;
  -moz-box-shadow: unset;
  box-shadow: unset;
  pointer-events: none;
}

.carousel-view .wrapper .next-offset {
  justify-content: flex-start !important;
  margin-left: -7%;
  pointer-events: none;
}

.carousel-view .wrapper .next-offset .header {
  display: none;
}

.carousel-view .wrapper .prev-offset {
  justify-content: flex-end !important;
  margin-right: -7%;
  pointer-events: none;
}

.carousel-view .wrapper .prev-offset .header {
  display: none;
}

.carousel-view:after {
  content: '';
  display: block;
  clear: both;
}

#controls {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#controls .btn {
  position: absolute;
  width: 3.2vw;
  height: 3.2vw;
  max-width: 52px;
  padding: 0;
  margin: 0;
  z-index: 10;
}

#controls #next {
  right: 1%;
  cursor: pointer;
  background: url("//landofsharks.holdrr.com/assets/images/carousel-next-btn.svg") no-repeat;
  background-size: contain;
}

#controls #prev {
  left: 3.5%;
  background: url("//landofsharks.holdrr.com/assets/images/carousel-prev-btn.svg") no-repeat;
  cursor: pointer;
  background-size: contain;
}

.carousel-bottom-arrow {
  position: absolute;
  width: 100%;
  text-align: center;
  margin-top: -1px;
}

hr {
  margin: 0;
  padding: 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #d0d3d4;
}

#tray-view {
  background: #e3ebed;
  height: auto;
  color: #011a2c;
  padding: 10px 0;
}

#tray-view h3 {
  text-align: center;
  text-transform: uppercase;
  font-size: 1.375rem;
  margin-top: 5px;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

#tray-view h3.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .25s;
  /* Safari */
  transition-delay: .25s;
}

#tray-view p {
  text-align: center;
  text-transform: uppercase;
  font-size: 1rem;
  margin-bottom: 5px;
  margin-top: 35px;
  font-style: unset;
  font-weight: unset;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

#tray-view p.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#tray-view .tray-list {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  opacity: 0;
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
  transition: all .5s ease;
}

#tray-view .tray-list ::-webkit-scrollbar {
  display: none;
}

#tray-view .tray-list.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .5s;
  /* Safari */
  transition-delay: .5s;
}

#tray-view .tray-list .tray-item {
  position: relative;
  width: 40%;
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
  max-width: 22%;
  flex-basis: 0;
  flex-grow: 1;
  margin: 10px 1%;
}

#tray-view .tray-list .tray-item .description {
  width: 100%;
  word-break: break-word;
  white-space: normal;
}

#tray-view .tray-list .tray-item .description h4 {
  text-transform: uppercase;
  font-size: 0.875rem;
  margin: 15px 0 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#tray-view .tray-list .tray-item .description p {
  font-size: 0.75rem;
  margin: 7px 0 15px;
}

#tray-view .tray-list .tray-item .tray-item-thumbnail {
  position: relative;
  cursor: pointer;
  width: 100%;
}

#tray-view .tray-list .tray-item .tray-item-thumbnail img {
  width: 100%;
  height: auto;
  -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.4);
  box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.4);
}

#tray-view .tray-list .tray-item .tray-item-thumbnail .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18%;
  height: auto;
  -webkit-box-shadow: unset;
  -moz-box-shadow: unset;
  box-shadow: unset;
}

#tray-view .tray-list .tray-item:first-child {
  margin-left: 2%;
}

#tray-view .tray-list .tray-item:last-child {
  margin-right: 2%;
}

#tray-view hr {
  margin: 0;
  padding: 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid d0d3d4;
}

#video-gallery-component {
  position: relative;
  height: auto;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  -webkit-align-content: stretch;
  align-content: stretch;
  background-color: #fff;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(#fff, #f2f6f7);
}

#video-gallery-component .carousel-container-view {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transform: translate3d(-40%, 0, 0);
  transform: translate3d(-40%, 0, 0);
  transition: all .25s ease;
}

#video-gallery-component .carousel-container-view.show {
  opacity: 1;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

#video-gallery-component #controls {
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
}

#hotspots-gallery-component {
  position: relative;
  height: auto;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  -webkit-align-content: stretch;
  align-content: stretch;
  background: url("//landofsharks.holdrr.com/assets/images/hotspots-gallery-fun-voyage.jpg") no-repeat;
  background-size: cover;
  background-position: bottom center;
  padding: 0;
  overflow: hidden;
}

#hotspots-gallery-component #hotspots-view {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: auto;
}

#hotspots-gallery-component #hotspots-view .hotspots-header {
  position: absolute;
  width: 60%;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -5%);
  color: #fff;
}

#hotspots-gallery-component #hotspots-view .hotspots-header h2 {
  text-align: center;
  font-size: 1.375rem;
  margin: 0 0 30px;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

#hotspots-gallery-component #hotspots-view .hotspots-header h2.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#hotspots-gallery-component #hotspots-view .hotspots-header p {
  text-align: center;
  margin: 10px auto;
  max-width: 600px;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

#hotspots-gallery-component #hotspots-view .hotspots-header p.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .25s;
  transition-delay: .25s;
}

#hotspots-gallery-component #hotspots-view img {
  width: 100%;
  height: 100%;
}

#hotspots-gallery-component #hotspots-view .hotspots-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#hotspots-gallery-component #hotspots-view .hotspots-container .hotspot-icon {
  width: 3vw;
  height: 3vw;
  position: absolute;
  cursor: pointer;
}

#hotspots-gallery-component #hotspots-view .hotspots-container .hotspot-icon img {
  width: 100%;
  height: 100%;
}

#hotspots-gallery-component #hotspots-view .hotspots-container .o-family {
  left: 81%;
  top: 70%;
}

#hotspots-gallery-component #hotspots-view .hotspots-container .o-vw {
  left: 50%;
  top: 68%;
}

#hotspots-gallery-component #hotspots-view .hotspots-container .o-shark {
  left: 42.5%;
  top: 42.5%;
}

#hotspots-gallery-component #hotspots-view .hotspots-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92.3%;
  height: 88%;
  background: rgba(0, 0, 0, 0.9);
  transition: all .25s ease;
  overflow: hidden;
}

#hotspots-gallery-component #hotspots-view .hotspots-overlay.reveal {
  opacity: 1;
}

#hotspots-gallery-component #hotspots-view .hotspots-overlay .hotspots-contents {
  width: auto;
  height: 100%;
}

#hotspots-gallery-component #hotspots-view .hotspots-overlay .hotspots-contents .content-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-direction: column;
  visibility: hidden;
}

#hotspots-gallery-component #hotspots-view .hotspots-overlay .hotspots-contents .content-wrapper p {
  text-align: center;
  padding: 0 25%;
}

#hotspots-gallery-component #hotspots-view .hotspots-overlay .hotspots-contents .content-wrapper img {
  width: 100%;
  height: unset;
}

#hotspots-gallery-component #hotspots-view .hotspots-overlay .hotspots-contents #o-shark img {
  width: 36%;
}

#hotspots-gallery-component #hotspots-view .hotspots-overlay .hotspots-contents #o-family img {
  width: 75%;
}

#hotspots-gallery-component #hotspots-view .hotspots-overlay .close-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 2%;
  right: 1%;
  z-index: 1;
  cursor: pointer;
}

#timelapse-component {
  max-height: 788px;
  height: 50vw;
  min-height: initial;
  color: #fff;
}

#timelapse-component .timelapse-header {
  position: absolute;
  width: 45%;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -5%);
  color: #fff;
}

#timelapse-component .timelapse-header h2 {
  text-align: center;
  font-size: 1.375rem;
  margin: 0 0 30px;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

#timelapse-component .timelapse-header h2.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#timelapse-component .timelapse-header p {
  text-align: center;
  margin: 10px auto;
  max-width: 565px;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

#timelapse-component .timelapse-header p.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .25s;
  /* Safari */
  transition-delay: .25s;
}

#timelapse-component #timelapse-video {
  width: 100%;
  height: 100%;
}

#timelapse-component #timelapse-video video {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
}

#timelapse-component h3 {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3.75rem;
}

#timelapse-component h3 span {
  font-size: 1.5rem;
}

.hotspot-callout {
  width: 90%;
  max-width: 600px;
  min-width: 280px;
  color: #fff;
  padding: 10px 10px 10px 30px;
  opacity: 0;
  display: flex;
  bottom: 10%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.hotspot-callout.mouth {
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
}

.hotspot-callout.size {
  /*right: initial;
    left: 1vw;*/
  bottom: 20%;
}

.hotspot-callout.fin {
  /*bottom: inherit;
    top: 4vh;
    right: 4vw;*/
  bottom: 6%;
}

.hotspot-callout.skin {
  bottom: 6%;
}

.hotspot-callout p {
  font-family: "Prompt", Helvetica, sans-serif;
  font-weight: 200;
  font-style: normal;
  letter-spacing: 1.5px;
  font-size: 16px;
}

.hotspot-callout .close-btn {
  pointer-events: none;
  width: 40px;
  transition: opacity .25s ease;
  opacity: .7;
  top: 12px;
  position: relative;
  padding: 0 10px;
  top: 11px;
}

.hotspot-callout .close-btn svg {
  width: 40px;
  height: 40px;
}

.hotspot-callout .close-btn:hover {
  opacity: 1;
}

.hotspot-callout.reveal {
  opacity: 1;
  transition: all .5s ease;
}

.hotspot-callout.reveal .close-btn {
  width: 40px;
  pointer-events: all;
  cursor: pointer;
}

.hotspot-callout p {
  font-family: 'Titillium Web', sans-serif;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 140%;
}

#hotspot-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #002339;
  opacity: .35;
  pointer-events: none;
  z-index: 120;
  transition: all .25s ease;
}

#hotspot-overlay.show {
  opacity: .7;
  pointer-events: all;
}

.carousel-view {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-view .wrapper {
  position: relative;
  margin: 40px 0 20px;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.carousel-view .wrapper .carousel-item {
  position: relative;
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

.carousel-view .wrapper .carousel-item.disable {
  pointer-events: none;
}

.carousel-view .wrapper .carousel-item.enable {
  pointer-events: all;
}

.carousel-view .wrapper .carousel-item .header {
  position: absolute;
  color: #fff;
  text-align: center;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.carousel-view .wrapper .carousel-item .header h3 {
  font-size: 1.5rem;
  margin: 12% auto 6%;
}

.carousel-view .wrapper .carousel-item .header h4 {
  font-size: 3.75rem;
  margin: 6% auto 8%;
}

.carousel-view .wrapper .carousel-item .thumbnail {
  width: 82%;
  height: auto;
  cursor: pointer;
  position: relative;
}

.carousel-view .wrapper .carousel-item .thumbnail video,
.carousel-view .wrapper .carousel-item .thumbnail img {
  width: 100%;
  height: auto;
  -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.4);
  box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.4);
}

.carousel-view .wrapper .carousel-item .thumbnail p {
  text-align: center;
  white-space: normal;
  word-break: break-word;
  color: #7c878e;
  padding: 0 2%;
  margin: 25px 0;
}

.carousel-view .wrapper .carousel-item .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
  height: 15%;
  -webkit-box-shadow: unset;
  -moz-box-shadow: unset;
  box-shadow: unset;
  pointer-events: none;
}

.carousel-view .wrapper .next-offset {
  justify-content: flex-start !important;
  margin-left: -7%;
  pointer-events: none;
}

.carousel-view .wrapper .next-offset .header {
  display: none;
}

.carousel-view .wrapper .prev-offset {
  justify-content: flex-end !important;
  margin-right: -7%;
  pointer-events: none;
}

.carousel-view .wrapper .prev-offset .header {
  display: none;
}

.carousel-view:after {
  content: '';
  display: block;
  clear: both;
}

#controls {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#controls .btn {
  position: absolute;
  width: 3.2vw;
  height: 3.2vw;
  max-width: 52px;
  padding: 0;
  margin: 0;
  z-index: 10;
}

#controls #next {
  right: 1%;
  cursor: pointer;
  background: url("//landofsharks.holdrr.com/assets/images/carousel-next-btn.svg") no-repeat;
  background-size: contain;
}

#controls #prev {
  left: 3.5%;
  background: url("//landofsharks.holdrr.com/assets/images/carousel-prev-btn.svg") no-repeat;
  cursor: pointer;
  background-size: contain;
}

.carousel-bottom-arrow {
  position: absolute;
  width: 100%;
  text-align: center;
  margin-top: -1px;
}

hr {
  margin: 0;
  padding: 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #d0d3d4;
}

#video-gallery-component {
  position: relative;
  height: auto;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  -webkit-align-content: stretch;
  align-content: stretch;
  background-color: #fff;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(#fff, #f2f6f7);
}

#video-gallery-component .carousel-container-view {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transform: translate3d(-40%, 0, 0);
  transform: translate3d(-40%, 0, 0);
  transition: all .25s ease;
}

#video-gallery-component .carousel-container-view.show {
  opacity: 1;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

#video-gallery-component #controls {
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
}

#image-gallery-component {
  height: auto;
  background-color: #fff;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(#fff, #f2f6f7);
}

#image-gallery-component h2 {
  text-align: center;
  font-size: 1.375rem;
  margin: 30px 0 20px;
  color: #011a2c;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

#image-gallery-component h2.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#image-gallery-component .wrapper {
  opacity: 0;
  transition: all .25s ease;
}

#image-gallery-component .wrapper.show {
  opacity: 1;
  -webkit-transition-delay: .4s;
  /* Safari */
  transition-delay: .4s;
}

#image-gallery-component #image-container-view {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#image-gallery-component #controls {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#outro {
  background: url("//landofsharks.holdrr.com/assets/images/outro-bg.jpg") no-repeat;
  background-size: cover;
  min-height: 700px;
  background-position: right top;
  color: #fff;
}

#outro h3 {
  font-family: "VW-Head-Bd", Helvetica, sans-serif;
  margin: 30% 0 1.4%;
  font-style: unset;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .25s ease;
}

#outro h3.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#outro p {
  width: 45%;
  text-align: center;
  margin: 1.4% 0;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .25s ease;
}

#outro p.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .25s;
  /* Safari */
  transition-delay: .25s;
}

#outro a {
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

#outro a.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .5s;
  /* Safari */
  transition-delay: .5s;
}

#outro .outro-explor-btn {
  background: #00b1eb;
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  color: #ffffff;
  font-size: 0.75rem;
  padding: 10px 6%;
  text-decoration: none;
  margin: 1.4% 0;
  cursor: pointer;
}

#footer-dsc-component {
  width: 100%;
  height: auto;
}

#modal-component-view {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #002339;
  pointer-events: none;
  z-index: 8600;
  transition: all .5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  background-color: #000;
}

#modal-component-view #modal-video-player {
  width: 100%;
  height: 100%;
}

#modal-component-view #modal-video-player video {
  width: 100%;
  height: 100%;
}

#modal-component-view .close-btn {
  pointer-events: none;
  width: 40px;
  transition: opacity .25s ease;
  opacity: .7;
  top: 12px;
  right: 12px;
  position: absolute;
  padding: 0 10px;
  top: 11px;
}

#modal-component-view .close-btn svg {
  width: 40px;
  height: 40px;
}

#modal-component-view .close-btn:hover {
  opacity: 1;
}

#modal-component-view.reveal {
  opacity: 1;
  pointer-events: all;
  transition: all .5s ease;
}

#modal-component-view.reveal .close-btn {
  width: 40px;
  pointer-events: all;
  z-index: 1;
  cursor: pointer;
}

#social-intro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: #002339;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

#social-intro .los-logo {
  position: relative;
  width: 100%;
  height: 32%;
}

#social-intro .los-logo svg {
  width: 100%;
  height: 100%;
}

#social-intro h4,
#social-intro p {
  font-style: normal;
  max-width: 500px;
  text-align: center;
  color: #fff;
  font-weight: 200;
}

#modal-error {
  color: #fff;
  left: 50%;
  max-width: 600px;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

#modal-error h2 {
  line-height: 1.2em;
}

#modal-error h4 {
  font-family: 'Titillium Web', sans-serif;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 140%;
  font-style: normal;
  margin-right: auto;
  margin-left: auto;
  font-weight: 600;
  width: 90%;
  max-width: 500px;
}

#modal-error ul {
  position: relative;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  min-height: 70px;
}

#modal-error ul li {
  position: relative;
  width: 120px;
  height: 50px;
  border-radius: 8px;
  background-color: #00B3E9;
  display: inline-block;
  color: #fff;
  text-align: center;
  margin: 10px;
  cursor: pointer;
  pointer-events: all;
}

@media (max-width: 768px) {
  article.middle {
    opacity: 0;
    display: none;
  }

  .los-component {
    width: 100%;
  }

  #sticky-nav {
    position: fixed;
  }

  #sticky-nav dl {
    margin: 0 3% 0 1%;
    overflow: hidden;
  }

  #sticky-nav dl.center {
    left: 0;
  }

  #sticky-nav dl dd h3,
  #sticky-nav dl dt h3 {
    display: none;
  }

  #sticky-nav dl.right {
    display: flex;
  }

  #sticky-nav dl dd.vw-logo {
    /*width:40px;
                height:40px;*/
    margin-left: 0;
  }

  #sticky-nav dl dt#dsc-logo {
    /*width:50px;
                height:42px;
                &.reveal {
                    width:50px;
                    height:42px;
                }*/
  }

  #sticky-nav dl.center dd#nav-los-lockup {
    width: 150px;
    height: 21px;
  }

  #landingpage-component {
    margin-bottom: 0;
  }

  #landingpage-component #logo-animation-view .los-images .current-image {
    width: 45vh;
    top: 10%;
  }

  #landingpage-component #logo-animation-view article#text {
    top: 30vh;
  }

  #landingpage-component #logo-animation-view article#text h1 {
    font-size: 4vh;
  }

  #landingpage-component #logo-animation-view article#text p {
    font-size: 1.6vh;
  }

  #landingpage-component #logo-animation-view #landing-search {
    top: 48vh;
  }

  #landingpage-component #landingpage-lockup div#logo {
    width: 70%;
    text-align: center;
  }

  #landingpage-component #landingpage-lockup div#logo p {
    font-size: 0.6875rem;
  }

  #landingpage-component #landingpage-lockup article#text {
    text-align: center;
  }

  #landingpage-component #landingpage-lockup article#text h1 {
    font-size: 2rem;
    margin: 35px 0 35px 0;
  }

  #landingpage-component #landingpage-lockup article#text p {
    margin: 50px 0 40px;
    font-size: 1.125rem;
    display: none;
  }

  #controls .btn {
    width: 40px;
    height: 40px;
  }

  #controls #prev {
    left: 1%;
  }

  #video-gallery-component #controls {
    top: 33%;
    left: 50%;
    transform: translate(-50%, -33%);
  }

  #image-gallery-component {
    min-height: 500px;
  }

  #image-gallery-component #controls {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #slider-component #shark-view-360 #suv-scale-figure {
    top: 73%;
  }

  #slider-component #shark-view-360 #godzilla .shark-images {
    top: 38%;
  }

  #slider-component #shark-view-360 .rotation-icon {
    width: 7vw;
    height: 7vw;
  }

  #slider-component #slider {
    width: 40vw;
    margin: 2rem auto 1rem;
  }

  #slider-component .line-scale-view div.text p {
    line-height: .8rem;
    font-size: .8rem;
  }

  #timelapse-component {
    height: 53vw;
  }

  #hotspots-gallery-component {
    background-size: cover;
    background-position: center;
    padding: 0;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-container .hotspot-icon {
    width: 5vw;
    height: auto;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-container .hotspot-icon.o-family {
    top: 68%;
  }

  #hotspots-gallery-component {
    background-size: cover;
    background-position: center;
    padding: 0;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-container .hotspot-icon {
    width: 5vw;
    height: auto;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-container .hotspot-icon.o-family {
    top: 68%;
  }

  #streetview-preloader section article {
    width: 100vw;
  }

  #streetview-preloader section article.epochs div.location-line h5 {
    font-size: 35px;
    width: 100%;
  }

  #streetview-preloader section article.epochs div.location-line h2 {
    width: 100%;
    font-size: 60px;
    text-align: center;
  }

  #outro h3 {
    margin: 40% 0 1.4%;
  }

  #outro p {
    width: 80%;
  }

  #outro .outro-explor-btn {
    padding: 10px 15%;
    margin: 3% 0;
  }

  #streetview-preloader section article.shark-lockup h1 {
    font-size: 2.125rem;
  }

  #streetview-preloader section article.shark-lockup .shark-title p {
    text-align: center;
    font-size: 0.875rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  article.middle {
    opacity: 0;
    display: none;
  }

  .los-component {
    width: 100%;
  }

  #sticky-nav {
    position: fixed;
  }

  #sticky-nav dl {
    margin: 0 3% 0 1%;
    overflow: hidden;
  }

  #sticky-nav dl.center {
    left: 0;
  }

  #sticky-nav dl dd h3,
  #sticky-nav dl dt h3 {
    display: none;
  }

  #sticky-nav dl.right {
    display: flex;
    margin: 0 1%;
  }

  #sticky-nav dl.left {
    margin: 0 2%;
  }

  #sticky-nav dl.center dd#nav-los-lockup {
    width: 150px;
    height: 21px;
  }

  #landingpage-component {
    margin-bottom: 0;
  }

  #landingpage-component #landingpage-lockup div#logo {
    width: 50%;
    text-align: center;
  }

  #landingpage-component #landingpage-lockup div#logo p {
    font-size: 0.6875rem;
  }

  #landingpage-component #landingpage-lockup article#text {
    text-align: center;
  }

  #landingpage-component #landingpage-lockup article#text h1 {
    font-size: 1.875rem;
    margin: 25px 0 25px 0;
  }

  #landingpage-component #landingpage-lockup article#text p {
    margin: 20px 0 20px;
    font-size: 1.125rem;
  }

  #video-gallery-component #controls {
    top: 38%;
    left: 50%;
    transform: translate(-50%, -38%);
  }

  #video-gallery-component #controls .btn {
    width: 50px;
    height: 50px;
  }

  #image-gallery-component #controls {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #image-gallery-component #controls .btn {
    width: 50px;
    height: 50px;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-container .hotspot-icon {
    width: 4.5vw;
    height: auto;
  }

  #slider-component #shark-view-360 #suv-scale-figure {
    width: 30%;
    left: 50%;
    transform: translateX(-50%);
  }

  #slider-component #slider {
    width: 40vw;
    margin: 2rem auto 1rem;
  }

  .three-sixty-shark-viewer .rotation-icon {
    width: 6vw;
    height: 6vw;
  }

  #timelapse-component {
    height: 54vw;
  }

  #timelapse-component .timelapse-header {
    width: 55%;
  }

  #timelapse-component h3 span {
    font-size: 1.5rem;
  }
}

@media (max-width: 415px) and (orientation: portrait) {
  article.middle {
    opacity: 0;
    display: none;
  }

  .los-component {
    width: 100%;
    min-height: 570px;
  }

  #modal-info ul,
  #modal-credits ul {
    padding: 0;
  }

  #modal-info ul li,
  #modal-credits ul li {
    font-size: .8rem;
    letter-spacing: 0;
  }

  #streetview-preloader section article {
    width: 100vw;
  }

  #streetview-preloader section article.epochs div.location-line header {
    width: 120vw;
    transform: scale(0.85);
  }

  #streetview-preloader section article.epochs div.location-line h5 {
    font-size: 35px;
    width: 100%;
  }

  #streetview-preloader section article.epochs div.location-line h2 {
    width: 100%;
    font-size: 30px;
  }

  #streetview-component #streetview-sharks-ui-holder {
    height: 100%;
  }

  #streetview-component #streetview-sharks-ui-holder #streetview-footer {
    display: block;
    width: 100%;
  }

  #streetview-component #streetview-sharks-ui-holder #streetview-footer dl {
    position: absolute;
    width: 90%;
    display: block;
  }

  #streetview-component #streetview-sharks-ui-holder #streetview-footer dl#info {
    left: 5%;
  }

  #streetview-component #streetview-sharks-ui-holder #streetview-footer dl#info dt {
    float: left;
  }

  #streetview-component #streetview-sharks-ui-holder #streetview-footer dl#info dt:after {
    clear: both;
  }

  #streetview-component #streetview-sharks-ui-holder #streetview-footer dl#info dd {
    font-size: .8rem;
    padding-top: 8px;
    float: left;
    margin-left: 5px;
  }

  #streetview-component #streetview-sharks-ui-holder #streetview-footer dl.search-bar {
    bottom: 10px;
    left: 5%;
  }

  #streetview-component #streetview-sharks-ui-holder #streetview-footer dl:last-of-type {
    right: 5%;
    text-align: right;
    font-size: .8rem;
    bottom: -13px;
    width: 40%;
  }

  #landingpage-component {
    margin-bottom: 0;
    height: 90vh;
  }

  #landingpage-component #logo-animation-view canvas {
    top: 12%;
    width: 55vh;
  }

  #landingpage-component #logo-animation-view .los-images .static-image,
  #landingpage-component #logo-animation-view .los-images .current-image {
    width: 45vh;
    top: 12%;
  }

  #landingpage-component #logo-animation-view article#text {
    top: 32vh;
  }

  #landingpage-component #logo-animation-view article#text h1 {
    font-size: 3vh;
  }

  #landingpage-component #logo-animation-view article#text p {
    display: none;
  }

  #landingpage-component #logo-animation-view #landing-search {
    top: 42vh;
    width: 100%;
    max-width: 80%;
  }

  #landingpage-component #logo-animation-view #landing-search #pac-input {
    font-size: 1rem;
  }

  #landingpage-component #logo-animation-view #landing-search #pac-input:focus {
    font-size: 1rem;
  }

  #landingpage-component .landscape {
    background-position: 60% bottom !important;
  }

  #landingpage-component #landingpage-lockup div#logo {
    width: 80%;
    text-align: center;
  }

  #landingpage-component #landingpage-lockup div#logo p {
    font-size: 0.6875rem;
  }

  #landingpage-component #landingpage-lockup article#text {
    text-align: center;
  }

  #landingpage-component #landingpage-lockup article#text h1 {
    font-size: 1.25rem;
    margin: 35px 0 35px 0;
  }

  #landingpage-component #landingpage-lockup article#text p {
    margin: 50px 0 40px;
    font-size: 1.125rem;
    display: none;
  }

  #sticky-nav {
    position: fixed;
  }

  #sticky-nav dl {
    margin: 0 3% 0 1%;
    overflow: hidden;
  }

  #sticky-nav dl.center {
    left: 0;
  }

  #sticky-nav dl dd h3,
  #sticky-nav dl dt h3 {
    font-size: 18px;
    margin-left: 0;
  }

  #sticky-nav dl.right {
    display: flex;
  }

  #sticky-nav dl dd.vw-logo {
    width: 40px;
    height: 40px;
    margin-left: 0;
  }

  #sticky-nav dl dt#dsc-logo {
    width: 75px;
    height: 63px;
    margin-right: 0;
    /*&.reveal {
                    width:50px;
                    height:42px;
                }*/
  }

  #sticky-nav dl.center dd#nav-los-lockup {
    width: 150px;
    height: 21px;
  }

  #sticky-nav dl dd#presented-by {
    font-size: 0.5625rem;
    margin: 0;
  }

  #sticky-nav dl dd#nav-search {
    width: 100vw !important;
  }

  #sticky-nav dl dd#nav-search.show {
    width: 100vw !important;
  }

  #sticky-nav dl dd#nav-search.hide {
    display: none;
  }

  #sticky-nav dl dd#nav-search #pac-input {
    font-size: 16px !important;
  }

  #sticky-nav dl dd#nav-search #pac-input:focus {
    font-size: 16px;
  }

  #sticky-nav dl dd#nav-search .magnifying-icon {
    padding-right: 5px !important;
  }

  #sticky-nav dl dd#nav-magnifying-icon {
    width: 0;
  }

  #sticky-nav dl dd#nav-magnifying-icon.reveal {
    width: 30px !important;
    margin-right: 0px;
    padding-right: 5px !important;
  }

  #hotspots-generator .hotspot-circles {
    display: none;
  }

  .hotspot-callout.reveal {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    box-sizing: border-box;
    padding: 0;
  }

  .hotspot-callout.reveal .close-btn {
    top: 20px;
    right: 10px;
    position: absolute;
  }

  .hotspot-callout.reveal p {
    position: absolute;
    bottom: 0;
    padding: 30px;
    font-size: 13px;
  }

  #video-gallery-component .carousel-view .wrapper {
    margin: 20px 0;
  }

  #video-gallery-component .carousel-view .wrapper .carousel-item .header {
    top: 0;
    color: #011a2c;
  }

  #video-gallery-component .carousel-view .wrapper .carousel-item .header h3 {
    font-size: 1.25rem;
    margin: 0 auto 2%;
  }

  #video-gallery-component .carousel-view .wrapper .carousel-item .header h4 {
    font-size: 2rem;
    margin: 2% auto 5%;
  }

  #video-gallery-component .carousel-view .wrapper .carousel-item .thumbnail {
    margin-top: 20%;
  }

  #video-gallery-component .carousel-view .wrapper .carousel-item .thumbnail p {
    font-size: 0.875rem;
  }

  #video-gallery-component #controls {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
  }

  #image-gallery-component {
    min-height: 360px;
  }

  #image-gallery-component .carousel-view .wrapper {
    margin: 20px 0;
  }

  #image-gallery-component .carousel-view .wrapper .carousel-item .header h3 {
    font-size: 1.25rem;
    margin: 0 auto 2%;
  }

  #image-gallery-component .carousel-view .wrapper .carousel-item .header h4 {
    font-size: 2rem;
    margin: 2% auto 5%;
  }

  #image-gallery-component .carousel-view .wrapper .carousel-item .thumbnail p {
    font-size: 0.875rem;
  }

  #image-gallery-component #controls {
    top: 52%;
    left: 50%;
    transform: translate(-50%, -52%);
  }

  .carousel-view .wrapper .carousel-item .thumbnail {
    width: 95%;
    height: auto;
    cursor: pointer;
    position: relative;
  }

  .carousel-view .wrapper .next-offset {
    justify-content: flex-start !important;
    margin-left: -2%;
  }

  .carousel-view .wrapper .prev-offset {
    justify-content: flex-end !important;
    margin-right: -2%;
  }

  #controls .btn {
    width: 8vw !important;
    height: 8vw !important;
  }

  #controls #next {
    background: url("//landofsharks.holdrr.com/assets/images/carousel-mobile-next-btn.svg") no-repeat;
  }

  #controls #prev {
    background: url("//landofsharks.holdrr.com/assets/images/carousel-mobile-prev-btn.svg") no-repeat;
  }

  #controls #prev {
    left: 3.2% !important;
  }

  #tray-view h3 {
    font-size: 1.25rem;
  }

  #tray-view .tray-list {
    overflow-x: unset;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    white-space: unset;
  }

  #tray-view .tray-list ::-webkit-scrollbar {
    display: none;
  }

  #tray-view .tray-list .tray-item {
    margin: 10px 2%;
    max-width: unset;
    flex-basis: unset;
    flex-grow: unset;
  }

  #tray-view .tray-list .tray-item .description h4 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  #tray-view .tray-list .tray-item img.play-btn {
    width: 100%;
    height: 100%;
  }

  #tray-view .tray-list .tray-item:first-child {
    margin-left: unset;
  }

  #tray-view .tray-list .tray-item:last-child {
    margin-right: unset;
  }

  #slider-component {
    min-height: 560px;
  }

  #slider-component #shark-view-360 {
    margin-top: 20px;
  }

  #slider-component #shark-view-360 #suv-scale-figure {
    width: 50%;
    left: 50%;
    top: 72%;
    transform: translateX(-50%);
  }

  #slider-component #shark-view-360 .shark-images {
    top: 42%;
  }

  #slider-component #shark-view-360 #godzilla .shark-images {
    top: 46%;
  }

  #slider-component #shark-view-360 #stetha .shark-images {
    top: 52%;
  }

  #slider-component #shark-view-360 .rotation-icon {
    top: 57%;
    width: 12vw;
    height: 12vw;
  }

  #slider-component #slider {
    width: 50vw;
    margin: 2rem auto 1rem;
  }

  #slider-component .shark-small-scale {
    width: 15%;
    height: auto;
    margin: 0 10%;
    pointer-events: none;
  }

  #slider-component .shark-big-scale {
    width: 25%;
    height: auto;
    margin: 0 10%;
    pointer-events: none;
  }

  #slider-component #knob {
    height: 30px;
    width: 30px;
  }

  #slider-component .line-scale-view {
    height: 32px;
  }

  #slider-component .line-scale-view.shark-line-top {
    margin-top: 55%;
  }

  #slider-component .line-scale-view.vw-line-top {
    margin-top: 2%;
  }

  #slider-component .line-scale-view div.text p {
    line-height: .8rem;
    font-size: .8rem;
  }

  .three-sixty-shark-viewer .shark-images {
    left: 50%;
    top: 35%;
    transform: translate(-50%, -35%);
    width: 80%;
    height: auto;
  }

  .three-sixty-shark-viewer .rotation-icon {
    width: 9vw;
    height: 9vw;
  }

  #outro,
  #timelapse-component,
  #hotspots-gallery-component {
    min-height: 570px;
  }

  #slider-component {
    min-height: 540px;
  }

  #timelapse-component {
    min-height: 0;
    width: 100%;
    height: 107vw;
  }

  #timelapse-component video {
    width: 100vw !important;
    height: 107vw !important;
    left: 0 !important;
  }

  #timelapse-component .timelapse-header {
    width: 100%;
  }

  #timelapse-component .timelapse-header p {
    padding: 0 30px;
  }

  #timelapse-component h3 {
    width: 100%;
    font-size: 2.25rem;
    text-align: center;
  }

  #timelapse-component h3 span {
    font-size: 0.875rem;
  }

  #hotspots-gallery-component {
    background: url("//landofsharks.holdrr.com/assets/images/hotspots-gallery-mobile-fun-voyage.jpg") no-repeat;
    background-size: cover;
    padding: 0;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-header {
    width: 100%;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-header p {
    padding: 0 30px;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-container .hotspot-icon {
    width: 10vw;
    height: auto;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-container .o-family {
    left: 84%;
    top: 64%;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-container .o-vw {
    left: 12%;
    top: 66%;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-container .o-shark {
    left: 52%;
    top: 44%;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-overlay .hotspots-contents .content-wrapper p {
    padding: 0 8%;
    font-size: 0.875rem;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-overlay .hotspots-contents .content-wrapper img {
    width: 100%;
    height: unset;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-overlay .hotspots-contents #o-shark img {
    width: 68%;
  }

  #hotspots-gallery-component #hotspots-view .hotspots-overlay .hotspots-contents #o-family img {
    width: 105%;
  }

  #outro {
    background: url("//landofsharks.holdrr.com/assets/images/outro-mobile-bg.jpg") no-repeat;
    background-size: cover;
    background-position: right top;
  }

  #outro h3 {
    margin: 40% 0 1.4%;
  }

  #outro p {
    width: 70%;
  }

  #outro .outro-explor-btn {
    padding: 10px 15%;
    margin: 3% 0;
  }

  #streetview-preloader section article.shark-lockup h1 {
    font-size: 2rem;
  }

  #streetview-preloader section article.shark-lockup .shark-title p {
    text-align: center;
    font-size: 0.875rem;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  body {
    overflow-x: hidden !important;
  }

  .los-component {
    width: 100%;
  }

  #landingpage-component {
    margin-bottom: 0;
    min-height: unset;
    height: 100vh;
  }

  #landingpage-component #landingpage-lockup div#logo {
    width: 40%;
    text-align: center;
  }

  #landingpage-component #landingpage-lockup div#logo p {
    font-size: 0.625rem;
  }

  #landingpage-component #landingpage-lockup article#text {
    text-align: center;
  }

  #landingpage-component #landingpage-lockup article#text h1 {
    font-size: 1.5rem;
    margin: 15px 0;
  }

  #landingpage-component #landingpage-lockup article#text p {
    margin: 20px 0 20px;
    font-size: 1.125rem;
    display: none;
  }

  #timelapse-component {
    min-height: unset;
    height: 100vh;
  }

  #timelapse-component h3 {
    width: 100%;
    font-size: 2.25rem;
    padding: 0 30px;
    text-align: center;
  }

  #timelapse-component h3 span {
    font-size: 0.875rem;
  }

  #video-gallery-component #controls {
    top: 35%;
    left: 50%;
    transform: translate(-50%, -35%);
  }

  #image-gallery-component #controls {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/*
html,body {
  background-color: #000;// $bgColor;
  color:$txtColor;
  font-size: 16px;
  font-family: 'Titillium Web', sans-serif;
  line-height: 1em;

    position:absolute;
  width:100%;
  height:100%;

  margin:0;
  padding:0;
  overflow-x:hidden;


}
*/

html,
body {
  background-color: #000;
  color: #10222B;
  font-size: 16px;
  font-family: 'Titillium Web', sans-serif;
  line-height: 1em;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

#land_of_sharks-app {
  position: absolute;
  width: 100%;
  height: 100%;
}

#land_of_sharks-app #controls #prev {
  left: 1%;
}

@media (min-width: 1200px) {
  .los-component {
    min-height: 720px;
  }

  #slider-component {
    min-height: 800px;
  }
}

@media (min-width: 1600px) {
  .los-component {
    min-height: 810px;
  }
}

.noscroll {
  overflow: hidden !important;
  height: 100%;
}

.draggable {
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.draggable:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.lock {
  position: fixed;
}

.noselect {
  pointer-events: none;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.ativate {
  pointer-events: all;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #000;
}

html.activate,
body.activate {
  overflow-y: scroll;
}


/*# sourceMappingURL=main.css.map*/