https://virtualvacation.us/

Scan-ID:: 69879ede-9d1c-4a22-a6a6-5f9a5f685072Beendet
Eingereichte URL:: https://virtualvacation.us/
Bericht beendet:: 18. Dez. 2024, 11:13:21
Links · 5 gefunden

Die von der Seite ausgehenden identifizierten Links
Link	Text
https://www.geoguessr.com/	GeoGuessr
https://www.w3schools.com/w3css/w3css_cards.asp	W3 CSS Cards
https://codepen.io/mirandalwashburn/pen/MWawdxr	Modern Travel Cards
http://pursued.nemesys.hu/	Pursued Maps
https://virtualvacation.typeform.com/to/VAdncnhj	Submit Video
JavaScript-Variablen · 139 gefunden

Globale JavaScript-Variablen, die in das Window Object einer Seite geladen werden, sind Variablen, die außerhalb von Funktionen deklariert werden und von jeder Stelle des Codes innerhalb des aktuellen Bereichs zugänglich sind
Name	Typ
0	object
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
$	function
jQuery	function
Popper	function
bootstrap	object
gtag	function
dataLayer	object
Konsolenprotokoll-Meldungen · 4 gefunden

In der Web-Konsole protokollierte Meldungen
Typ	Kategorie	Protokoll
error	network	URL https://virtualvacation.us/jquery.lazy.min.js Text Failed to load resource: the server responded with a status of 404 ()
error	other	URL https://platform-api.sharethis.com/panorama.js Text SYNC.JS: Aborting because TCF string was expected but not present.
error	other	URL https://platform-api.sharethis.com/panorama.js Text SYNC.JS: Aborting because no consent was present on the request or stored server-side
error	other	URL https://platform-api.sharethis.com/panorama.js Text SYNC.JS: Aborting due to above errors.
HTML

Der HTML-Rohtext der Seite
<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="”viewport”" content="”width=device-width," initial-scale="1″">
    <title>virtualvacation.us - Explore The World From Home</title>
    <meta name="description" content="Explore the world/globe from home with virtualvacation.us! View live footage from different cities, or even take a guessing quiz!">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script async="" src="https://platform-api.sharethis.com/panorama.js"></script><iframe id="pxcelframe" title="pxcelframe" src="//t.sharethis.com/a/t_.htm?ver=1.1620.23405&amp;cid=c010&amp;cls=B#cid=c010&amp;cls=B&amp;dmn=virtualvacation.us&amp;rnd=1734520411910&amp;tt=t.dhj&amp;dhjLcy=151&amp;lbl=pxcel&amp;flbl=pxcel&amp;ll=d&amp;ver=1.1620.23405&amp;ell=d&amp;cck=__stid&amp;pn=%2F&amp;qs=na&amp;rdn=virtualvacation.us&amp;rpn=%2F&amp;rqs=na&amp;cc=ES&amp;cont=EU&amp;ipaddr=" style="display: none;"></iframe><script async="" src="https://count-server.sharethis.com/v2.0/get_counts?cb=window.__sharethis__.cb&amp;url=https%3A%2F%2Fvirtualvacation.us%2F"></script><script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script><script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-9G8TLTJMM5&amp;l=dataLayer&amp;cx=c&amp;gtm=457e4cc1za200"></script><script async="" src="https://buttons-config.sharethis.com/js/5efe4a1ed9c6890012469011.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="jquery.lazy.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
    <link rel="manifest" href="static/site.webmanifest">
<!--     <meta property="og:title" content="virtualvacation.us - Explore the World from Home" />
    <meta property="og:image" content="https://virtualvacation.us/static/guess.jpg" /> -->
    <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=5efe4a1ed9c6890012469011&amp;product=sticky-share-buttons" async="async"></script>
    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-153516768-4"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-153516768-4');
    </script>
    <meta property="og:title" content="virtualvacation.us - Explore the World from Home">
    <meta property="og:image" content="https://virtualvacation.us/static/vvbeachimg.png">
    <!-- Global site tag (gtag.js) - Google Analytics -->
<!-- <script data-ad-client="ca-pub-2104426707154383" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> -->

<!--     <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5efe4a1ed9c6890012469011&product=sticky-share-buttons' async='async'></script> -->
    <!-- Global site tag (gtag.js) - Google Analytics -->
<style>
/*@import url(//fonts.googleapis.com/css?family=Lato:300:400);*/

html {
  scroll-behavior: smooth;
}

body {
  margin:0;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-weight:300;
  letter-spacing: 2px;
  font-size:48px;
}
h2 {
  font-family: 'Lato', sans-serif;
  font-weight:300;
  letter-spacing: 2px;
  font-size:48px;
}
p {
  font-family: 'Lato', sans-serif;
  letter-spacing: 1px;
  font-size:14px;
  color: #333333;
}

/*#i-am-lazy {
  display: none;
}

#i-am-lazy-2 {
  display: none;
}*/

.header {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  color:white;
}
.logo {
  width:50px;
  fill:white;
  padding-right:15px;
  display:inline-block;
  vertical-align: middle;
}

.inner-header {
  height:65vh;
  width:100%;
  margin: 0;
  padding: 0;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.wasf {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .wasf {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}
@media (max-width: 400px) {
  #randomize-id {
    display: none;
  }
}
</style><script>
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});
</script><style type="text/css">#st-1 {
  font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;;
  direction: ltr;
  display: block;
  opacity: 1;
  text-align: center;
  z-index: 94034;
}
#st-1.st-animated {
  -moz-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -ms-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -o-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -webkit-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in;
}
#st-1.st-hidden {
  opacity: 0;
}

#st-1.st-preview {
  display: none!important;
  opacity: 0!important;
}
#st-1.st-hide {
  display: none;
}
#st-1 .st-btn {
  -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
  -moz-transition: opacity 0.2s ease-in, top 0.2s ease-in; -ms-transition: opacity 0.2s ease-in, top 0.2s ease-in; -o-transition: opacity 0.2s ease-in, top 0.2s ease-in; -webkit-transition: opacity 0.2s ease-in, top 0.2s ease-in; transition: opacity 0.2s ease-in, top 0.2s ease-in;
  -moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 32px;
  line-height: 32px;
  margin-right: 8px;
  padding: 0 10px;
  position: relative;
  text-align: center;
  top: 0;
  vertical-align: top;
  white-space: nowrap;
}
#st-1 .st-btn:last-child {
  margin-right: 0;
}
#st-1 .st-btn > svg {
  height: 16px;
  width: 16px;
  position: relative;
  top: 8px;
  vertical-align: top;
}
#st-1 .st-btn > img {
  display: inline-block;
  height: 16px;
  width: 16px;
  position: relative;
  top: 8px;
  vertical-align: top;
}
#st-1 .st-btn > span {
  -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
  color: #fff;
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.5px;
  min-width: 60px;
  opacity: 1;
  padding: 0 6px;
  position: relative;
  vertical-align: top;
}
#st-1.st-has-labels .st-btn {
  min-width: 120px;
}
#st-1.st-has-labels .st-btn.st-remove-label {
  min-width: 50px;
}
#st-1.st-has-labels .st-btn.st-remove-label > span {
  display: none;
}
#st-1.st-has-labels .st-btn.st-hide-label > span {
  display: none;
}
#st-1 .st-total {
  color: #555;
  display: inline-block;
  font-weight: 500;
  line-height: 12px;
  margin-right: 0;
  max-width: 80px;
  padding: 4px 8px;
  text-align: center;
}
#st-1 .st-total.st-hidden {
  display: none;
}
#st-1 .st-total > span {
  font-size: 16px;
  line-height: 17px;
  display: block;
  padding: 0;
}
#st-1 .st-total > span.st-shares {
  font-size: 9px;
  line-height: 9px;
}
#st-1.st-justified {
  display: flex;
  text-align: center;
}
#st-1.st-justified .st-btn {
  -moz-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}#st-1 .st-btn:hover {
  opacity: .8;
  top: -4px;
}#st-1 .st-btn[data-network='facebook'] {
  background-color: #4267B2
}
#st-1 .st-btn[data-network='facebook'] img {
  filter: 
}
#st-1 .st-btn[data-network='facebook'] > span {
  color: #fff
}
#st-1 .st-btn[data-network='twitter'] {
  background-color: #000000
}
#st-1 .st-btn[data-network='twitter'] img {
  filter: 
}
#st-1 .st-btn[data-network='twitter'] > span {
  color: #fff
}
#st-1 .st-btn[data-network='pinterest'] {
  background-color: #CB2027
}
#st-1 .st-btn[data-network='pinterest'] img {
  filter: 
}
#st-1 .st-btn[data-network='pinterest'] > span {
  color: #fff
}
#st-1 .st-btn[data-network='email'] {
  background-color: #7d7d7d
}
#st-1 .st-btn[data-network='email'] img {
  filter: 
}
#st-1 .st-btn[data-network='email'] > span {
  color: #fff
}
#st-1 .st-btn[data-network='sms'] {
  background-color: #ffbd00
}
#st-1 .st-btn[data-network='sms'] img {
  filter: 
}
#st-1 .st-btn[data-network='sms'] > span {
  color: #fff
}
#st-1 .st-btn[data-network='sharethis'] {
  background-color: #95D03A
}
#st-1 .st-btn[data-network='sharethis'] img {
  filter: 
}
#st-1 .st-btn[data-network='sharethis'] > span {
  color: #fff
}#st-1 .st-btn[data-network='snapchat'] > span {
  color: #333};
}</style><style type="text/css">#st-2 {
  font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;;
  direction: ltr;
  display: block;
  opacity: 1;
  text-align: center;
  z-index: 94034;
}
#st-2.st-animated {
  -moz-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -ms-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -o-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -webkit-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in;
}
#st-2.st-hidden {
  opacity: 0;
}

#st-2.st-preview {
  display: none!important;
  opacity: 0!important;
}
#st-2.st-hide {
  display: none;
}
#st-2 .st-btn {
  -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
  -moz-transition: opacity 0.2s ease-in, top 0.2s ease-in; -ms-transition: opacity 0.2s ease-in, top 0.2s ease-in; -o-transition: opacity 0.2s ease-in, top 0.2s ease-in; -webkit-transition: opacity 0.2s ease-in, top 0.2s ease-in; transition: opacity 0.2s ease-in, top 0.2s ease-in;
  -moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 32px;
  line-height: 32px;
  margin-right: 8px;
  padding: 0 10px;
  position: relative;
  text-align: center;
  top: 0;
  vertical-align: top;
  white-space: nowrap;
}
#st-2 .st-btn:last-child {
  margin-right: 0;
}
#st-2 .st-btn > svg {
  height: 16px;
  width: 16px;
  position: relative;
  top: 8px;
  vertical-align: top;
}
#st-2 .st-btn > img {
  display: inline-block;
  height: 16px;
  width: 16px;
  position: relative;
  top: 8px;
  vertical-align: top;
}
#st-2 .st-btn > span {
  -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
  color: #fff;
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.5px;
  min-width: 60px;
  opacity: 1;
  padding: 0 6px;
  position: relative;
  vertical-align: top;
}
#st-2.st-has-labels .st-btn {
  min-width: 120px;
}
#st-2.st-has-labels .st-btn.st-remove-label {
  min-width: 50px;
}
#st-2.st-has-labels .st-btn.st-remove-label > span {
  display: none;
}
#st-2.st-has-labels .st-btn.st-hide-label > span {
  display: none;
}
#st-2 .st-total {
  color: #555;
  display: inline-block;
  font-weight: 500;
  line-height: 12px;
  margin-right: 0;
  max-width: 80px;
  padding: 4px 8px;
  text-align: center;
}
#st-2 .st-total.st-hidden {
  display: none;
}
#st-2 .st-total > span {
  font-size: 16px;
  line-height: 17px;
  display: block;
  padding: 0;
}
#st-2 .st-total > span.st-shares {
  font-size: 9px;
  line-height: 9px;
}
#st-2.st-justified {
  display: flex;
  text-align: center;
}
#st-2.st-justified .st-btn {
  -moz-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}#st-2 .st-btn:hover {
  opacity: .8;
  top: -4px;
}#st-2 .st-btn[data-network='facebook'] {
  background-color: #4267B2
}
#st-2 .st-btn[data-network='facebook'] img {
  filter: 
}
#st-2 .st-btn[data-network='facebook'] > span {
  color: #fff
}
#st-2 .st-btn[data-network='twitter'] {
  background-color: #000000
}
#st-2 .st-btn[data-network='twitter'] img {
  filter: 
}
#st-2 .st-btn[data-network='twitter'] > span {
  color: #fff
}
#st-2 .st-btn[data-network='pinterest'] {
  background-color: #CB2027
}
#st-2 .st-btn[data-network='pinterest'] img {
  filter: 
}
#st-2 .st-btn[data-network='pinterest'] > span {
  color: #fff
}
#st-2 .st-btn[data-network='email'] {
  background-color: #7d7d7d
}
#st-2 .st-btn[data-network='email'] img {
  filter: 
}
#st-2 .st-btn[data-network='email'] > span {
  color: #fff
}
#st-2 .st-btn[data-network='sms'] {
  background-color: #ffbd00
}
#st-2 .st-btn[data-network='sms'] img {
  filter: 
}
#st-2 .st-btn[data-network='sms'] > span {
  color: #fff
}
#st-2 .st-btn[data-network='sharethis'] {
  background-color: #95D03A
}
#st-2 .st-btn[data-network='sharethis'] img {
  filter: 
}
#st-2 .st-btn[data-network='sharethis'] > span {
  color: #fff
}#st-2 .st-btn[data-network='snapchat'] > span {
  color: #333};
}</style></head>









<body id="confetti"><canvas id="confetti-canvas" style="display:block;z-index:999999;pointer-events:none;position:fixed;top:0" width="800" height="600"></canvas>
<nav class="navbar navbar-expand-md navbar-dark navbar-thin bg-dark">
      <a class="navbar-brand back-mybtn" href="https://virtualvacation.us/">VirtualVacation   <i class="fa fa-map-marker" aria-hidden="true" style="margin-left: 5px;"></i></a>
<!--       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button> -->

      <div class="collapse navbar-collapse" id="navbarsExample04">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="https://virtualvacation.us/explore">Explore <i class="fa fa-plane" aria-hidden="true" style="margin-left: 5px;"></i><span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="https://virtualvacation.us/guess">Guess <i class="fa fa-question-circle" aria-hidden="true"></i><span class="sr-only">(current)</span></a>
          </li>

<!--           <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li> -->
          <!-- <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown04">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li> -->
        </ul>
<!--         <ul class="nav navbar-nav ml-auto">

        </ul> -->
<!--         <form class="form-inline my-2 my-md-0">
          <input class="form-control" type="text" placeholder="Search">
        </form> -->
<!--                   <li class="nav-item form-inline my-2 my-md-0">
            <a class="nav-link" href="#">Link</a>
          </li> -->
      </div>
    </nav>

<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background-color: #fff;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}
.mybtn {
  background-color: white;
  border: 1px solid #cccccc;
  color: #696969;
  padding: 0.5rem;
  /*text-transform: lowercase;*/
}
.mybtn--block {
  display: block;
  width: 100%;
}
.xcards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /*background: url(static/map.jpg);*/
  /*margin-top: 4em;*/
  padding: 0;
}
.xcards__item {
  display: flex;
  padding: 1rem;
}
@media (min-width: 40rem) {
  .xcards__item {
    width: 50%;
  }
}
@media (min-width: 56rem) {
  .xcards__item {
    width: 25%;
  }
}
#ycard {
  width: 25%;
}
@media (min-width: 40rem) {
  #ycard {
    width: 25%;
  }
}
@media (min-width: 56rem) {
  #ycard {
    width: 25%;
  }
}

@media (max-width: 1025px) {
  #ycard {
    width: 50%;
  }
}

.xcard {
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 40vh;
}
.xcard:hover {
  transform: scale(1.01);
}
.xcard:hover .xcard__image {
  filter: contrast(75%);
}
.xcard__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
}
.xcard__image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  filter: contrast(95%);
  overflow: hidden;
  position: relative;
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}
.xcard__image::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
@media (min-width: 40rem) {
  .xcard__image::before {
    padding-top: 75.6%;
  }
}
.xcard__image--home {
  background-image: url(static/homes.jpeg);
}
.xcard__image--flowers {
  background-image: url(static/live.jpg);
}
.xcard__image--river  {
  background-image: url(static/driving-vertical.jpeg);
}
.xcard__image--record {
  background-image: url(static/goldengatebridge_cali.jpeg);
}
.xcard__image--fence {
  background-image: url(static/walker.jpeg);
}

.xcard__image--walker {
  background-image: url(static/walker.jpeg);
}

.xcard__title {
  color: #696969;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.xcard__text {
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

@media screen and (max-width: 676px) {
  .header-text {
    width: 95%;
    text-align: center;
  }
}

@media screen and (max-width: 800px) {
  .xcards {
  }
}
.footer-tag {
  bottom: 0;
  background-color: #cccccc;
  width: 100%;
  height: 5vh;
  vertical-align: middle;
  margin-top: 1em;
  /*padding-top: 1%;*/
}

a:hover {
  text-decoration: none;
  color: inherit;
}
/*.xcards__item:hover {
  margin-top: -1em;
  transition: 0.3s ease;
}*/
.xcard__image--fence {
  background-image: url(static/walking.jpg);
}
</style>
<div class="content">
<div class="welcome">
    <div class="container-fluid">
          <div class="bg-dark">
            <h4 style="color: white; font-weight: bold;">Welcome to</h4>
            <h1></h1><h4 style="color: white; font-weight: bold;"><span class="back-mybtn">virtual vacation <i class="fa fa-map-marker" aria-hidden="true" style="margin-left: 5px;"></i> </span></h4>
            <p style="color: #f2f2f2;">The website that lets you experience the world from home! <i class="fa fa-plane" aria-hidden="true"></i></p>
          </div>
    </div>
  </div>
<ul class="xcards">
<a href="https://virtualvacation.us/walk">
</a><li class="xcards__item" style="cursor: pointer;"><a href="https://virtualvacation.us/walk">
    </a><div class="xcard"><a href="https://virtualvacation.us/walk">
      <div class="xcard__image lazyloaded" data-bgset="static/walkingicon.jpg" style="background-image: url(&quot;https://virtualvacation.us/static/walkingicon.jpg&quot;);"><picture style="display: none;"><source data-srcset="static/walkingicon.jpg" sizes="365px" srcset="static/walkingicon.jpg"><img alt="" class="lazyautosizes lazyloaded" data-sizes="auto" data-parent-fit="cover" sizes="365px"></picture></div>
      </a><div class="xcard__content"><a href="https://virtualvacation.us/walk">
        <div class="xcard__title">Walking Tour 👤</div>
        <p class="xcard__text">Walk Around 100+ Cities Around The Globe! Admire the beautiful scenery and street sounds. </p>

        </a><a class="mybtn mybtn--block xcard__mybtn" href="https://virtualvacation.us/walk">Begin!</a>
      </div>
    </div>
  </li>

<a href="https://virtualvacation.us/guess">
</a><li class="xcards__item" style="cursor: pointer;"><a href="https://virtualvacation.us/guess">
    </a><div class="xcard"><a href="https://virtualvacation.us/guess">
      <div class="xcard__image lazyloaded" data-bgset="static/beachvacation.jpg" style="background-image: url(&quot;https://virtualvacation.us/static/beachvacation.jpg&quot;);"><picture style="display: none;"><source data-srcset="static/beachvacation.jpg" sizes="365px" srcset="static/beachvacation.jpg"><img alt="" class="lazyautosizes lazyloaded" data-sizes="auto" data-parent-fit="cover" sizes="365px"></picture></div>
      </a><div class="xcard__content"><a href="https://virtualvacation.us/guess">
        <div class="xcard__title">City Guesser ❓</div>
        <p class="xcard__text">Guess your location from your surroundings and walk around &amp; admire the beautiful scenery!</p>
        </a><a class="mybtn mybtn--block xcard__mybtn" href="https://virtualvacation.us/guess">Begin!</a>
      </div>
    </div>
  </li>

<a href="https://virtualvacation.us/driver">
</a><li class="xcards__item" style="cursor: pointer;"><a href="https://virtualvacation.us/driver">
    </a><div class="xcard"><a href="https://virtualvacation.us/driver">
      <div class="xcard__image lazyloading" data-bgset="static/caricon.jpg"><picture style="display: none;"><source data-srcset="static/caricon.jpg" sizes="365px" srcset="static/caricon.jpg"><img alt="" class="lazyautosizes lazyloaded" data-sizes="auto" data-parent-fit="cover" sizes="365px"></picture></div>
      </a><div class="xcard__content"><a href="https://virtualvacation.us/driver">
        <div class="xcard__title">Driving Tour 🚗</div>
        <p class="xcard__text">Drive around and view the scenery from 100+ cities around the globe. Admire the beautiful sights!</p>
        </a><a class="mybtn mybtn--block xcard__mybtn" href="https://virtualvacation.us/driver">Begin!</a>
      </div>
    </div>
  </li>

<a href="https://virtualvacation.us/explore">
  </a><li class="xcards__item" style="cursor: pointer;"><a href="https://virtualvacation.us/explore">
    </a><div class="xcard"><a href="https://virtualvacation.us/explore">
      <div class="xcard__image lazyloading" data-bgset="static/sanfranciscopalm.jpg"><picture style="display: none;"><source data-srcset="static/sanfranciscopalm.jpg" sizes="365px" srcset="static/sanfranciscopalm.jpg"><img alt="" class="lazyautosizes lazyloaded" data-sizes="auto" data-parent-fit="cover" sizes="365px"></picture></div>
      </a><div class="xcard__content"><a href="https://virtualvacation.us/explore">
        <div class="xcard__title">Travel Hub 🌍</div>
        <p class="xcard__text">Explore the world by walking, driving, flying, and viewing live footage of different locations around the world.</p>
        </a><a class="mybtn mybtn--block xcard__mybtn" href="https://virtualvacation.us/explore">Begin!</a>
      </div>
    </div>
  </li>

<!-- </div> -->

</ul>

<!-- ShareThis BEGIN -->
<div class="sharethis-inline-share-buttons st-center st-has-labels  st-inline-share-buttons st-animated" id="st-1"><div class="st-total ">
  <span class="st-label">172k</span>
  <span class="st-shares">
    Shares
  </span>
</div><div class="st-btn st-first" data-network="facebook" style="display: inline-block;">
  <img alt="facebook sharing button" src="https://platform-cdn.sharethis.com/img/facebook.svg">
  <span class="st-label">Share</span>
</div><div class="st-btn" data-network="twitter" style="display: inline-block;">
  <img alt="twitter sharing button" src="https://platform-cdn.sharethis.com/img/twitter.svg">
  <span class="st-label">Tweet</span>
</div><div class="st-btn" data-network="pinterest" style="display: inline-block;">
  <img alt="pinterest sharing button" src="https://platform-cdn.sharethis.com/img/pinterest.svg">
  <span class="st-label">Pin</span>
</div><div class="st-btn" data-network="email" style="display: inline-block;">
  <img alt="email sharing button" src="https://platform-cdn.sharethis.com/img/email.svg">
  <span class="st-label">Email</span>
</div><div class="st-btn st-last" data-network="sharethis" style="display: inline-block;">
  <img alt="sharethis sharing button" src="https://platform-cdn.sharethis.com/img/sharethis.svg">
  <span class="st-label">Share</span>
</div></div>
<!-- ShareThis END -->

<ul class="xcards" style="margin-top: 1%">
  <a href="https://virtualvacation.us/livecam">
  </a><li class="xcards__item" id="ycard" style="cursor: pointer;"><a href="https://virtualvacation.us/livecam">
    </a><div class="xcard"><a href="https://virtualvacation.us/livecam">
      <div class="xcard__image lazyload" data-bgset="static/livecamicon.jpg"></div>
      </a><div class="xcard__content"><a href="https://virtualvacation.us/livecam">
        <div class="xcard__title">Live Cam 📸</div>
        <p class="xcard__text">View LIVE Footage from different cities around the world. Enjoy!</p>
        </a><a class="mybtn mybtn--block xcard__mybtn" href="https://virtualvacation.us/livecam">Begin!</a>
      </div>
    </div>
  </li>

<a href="https://virtualvacation.us/fly">
</a><li class="xcards__item" id="ycard" style="cursor: pointer;"><a href="https://virtualvacation.us/fly">
    </a><div class="xcard"><a href="https://virtualvacation.us/fly">
      <div class="xcard__image lazyload" data-bgset="static/aircrafticon.jpg"></div>
      </a><div class="xcard__content"><a href="https://virtualvacation.us/fly">
        <div class="xcard__title">Flying Tour ✈️</div>
        <p class="xcard__text">Enjoy the view from above for over 80+ cities from around the globe/world.</p>
        </a><a class="mybtn mybtn--block xcard__mybtn" href="https://virtualvacation.us/fly">Begin!</a>
      </div>
    </div>
  </li>

<a href="https://virtualvacation.us/monument">
  </a><li class="xcards__item" id="ycard" style="cursor: pointer;"><a href="https://virtualvacation.us/monument">
    </a><div class="xcard"><a href="https://virtualvacation.us/monument">
      <div class="xcard__image lazyload" data-bgset="static/monumenticon.jpg"></div>
      </a><div class="xcard__content"><a href="https://virtualvacation.us/monument">
        <div class="xcard__title">Monuments 🏛️</div>
        <p class="xcard__text">Explore different famous &amp; not famous monuments from around the world.</p>
        </a><a class="mybtn mybtn--block xcard__mybtn" href="https://virtualvacation.us/monument">Begin!</a>
      </div>
    </div>
  </li>

<a href="https://virtualvacation.us/videarth">
  </a><li class="xcards__item" id="ycard" style="cursor: pointer;"><a href="https://virtualvacation.us/videarth">
    </a><div class="xcard"><a href="https://virtualvacation.us/videarth">
      <div class="xcard__image lazyload" data-bgset="static/VidEarthImg.png"></div>
      </a><div class="xcard__content"><a href="https://virtualvacation.us/videarth">
        <div class="xcard__title">VidEarth 🌐</div>
        <p class="xcard__text">Click on cities on a map to view videos from that city!</p>
        </a><a class="mybtn mybtn--block xcard__mybtn" href="https://virtualvacation.us/videarth">Begin!</a>
      </div>
    </div>
  </li>

<a href="https://virtualvacation.us/window">
  </a><li class="xcards__item" id="ycard" style="cursor: pointer;"><a href="https://virtualvacation.us/window">
    </a><div class="xcard"><a href="https://virtualvacation.us/window">
      <div class="xcard__image lazyload" data-bgset="static/virtualwindow.png"></div>
      </a><div class="xcard__content"><a href="https://virtualvacation.us/window">
        <div class="xcard__title">Virtual Window 🏠</div>
        <p class="xcard__text">Experience window views from hundreds of different cities.</p>
        </a><a class="mybtn mybtn--block xcard__mybtn" href="https://virtualvacation.us/window">Begin!</a>
      </div>
    </div>
  </li>

<a href="https://virtualvacation.us/roadtrip">
  </a><li class="xcards__item" id="ycard" style="cursor: pointer;"><a href="https://virtualvacation.us/roadtrip">
    </a><div class="xcard"><a href="https://virtualvacation.us/roadtrip">
      <div class="xcard__image lazyload" data-bgset="static/roadtrip.png"></div>
      </a><div class="xcard__content"><a href="https://virtualvacation.us/roadtrip">
        <div class="xcard__title">Road Trip 🚙</div>
        <p class="xcard__text">Experience road trips by virtually driving between cities.</p>
        </a><a class="mybtn mybtn--block xcard__mybtn" href="https://virtualvacation.us/window">Begin!</a>
      </div>
    </div>
  </li>

<!-- </div> -->

</ul>

    <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center" style="border-radius: 10px; margin-left: 5%; margin-right: 5%;">
      <div class="col-md-5 p-lg-5 mx-auto my-5" style="">

        <h3 class="display-4 font-weight-normal">Guessing Game <i class="fa fa-question-circle" aria-hidden="true" style="color: darkblue;"></i></h3>
        <p class="lead font-weight-normal">Can you recognize where a city is just my walking around it? If so, give this game a go!</p>
        <a class="btn btn-primary btn-outline-secondary" href="https://virtualvacation.us/guess" style="color: #f2f2f2;"> Guessing Time! <i class="fa fa-street-view" aria-hidden="true"></i></a>
      </div>
      <hr>
      <div class="col-md-5 p-lg-5 mx-auto my-5">

        <h3 class="display-4 font-weight-normal">Support Us <i class="fa fa-users" aria-hidden="true" style="color: darkblue;"></i></h3>
        <p class="lead font-weight-normal">Want to help Virtual Vacation out? Give us a share and give others the gift of travel!</p>
        <div class="sharethis-inline-share-buttons st-center st-has-labels  st-inline-share-buttons st-animated" id="st-2"><div class="st-total ">
  <span class="st-label">172k</span>
  <span class="st-shares">
    Shares
  </span>
</div><div class="st-btn st-first st-remove-label" data-network="facebook" style="display: inline-block;">
  <img alt="facebook sharing button" src="https://platform-cdn.sharethis.com/img/facebook.svg">
  <span class="st-label">Share</span>
</div><div class="st-btn st-remove-label" data-network="twitter" style="display: inline-block;">
  <img alt="twitter sharing button" src="https://platform-cdn.sharethis.com/img/twitter.svg">
  <span class="st-label">Tweet</span>
</div><div class="st-btn st-remove-label" data-network="pinterest" style="display: none;">
  <img alt="pinterest sharing button" src="https://platform-cdn.sharethis.com/img/pinterest.svg">
  <span class="st-label">Pin</span>
</div><div class="st-btn st-remove-label" data-network="email" style="display: none;">
  <img alt="email sharing button" src="https://platform-cdn.sharethis.com/img/email.svg">
  <span class="st-label">Email</span>
</div><div class="st-btn st-last st-remove-label" data-network="sharethis" style="display: inline-block;">
  <img alt="sharethis sharing button" src="https://platform-cdn.sharethis.com/img/sharethis.svg">
  <span class="st-label">Share</span>
</div></div>

        <!-- <a class="btn btn-primary btn-outline-secondary" href="#" style="color: #f2f2f2;" Random Location <i class="fa fa-street-view" aria-hidden="true"></i></a> -->
      </div>
      <div class="product-device box-shadow d-none d-md-block"></div>
      <div class="product-device product-device-2 box-shadow d-none d-md-block"></div>
    </div>

    <footer class="container py-5 bg-light">
      <div class="row">
<!--         <div class="col-12 col-md">
          <i class="fa fa-street-view" aria-hidden="true" style="font-size: 35px;"></i>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mb-2"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
          <small class="d-block mb-3 text-muted">&copy; 2017-2018</small>
        </div> -->
                <div class="col-6 col-md">
          <h5 style="font-weight: bold;">Inspired By <i class="fa fa-camera" aria-hidden="true"></i></h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="https://www.geoguessr.com/">GeoGuessr</a></li>
            <li><a class="text-muted" href="https://www.w3schools.com/w3css/w3css_cards.asp">W3 CSS Cards</a></li>
            <li><a class="text-muted" href="https://codepen.io/mirandalwashburn/pen/MWawdxr">Modern Travel Cards</a></li>
            <li><a class="text-muted" href="http://pursued.nemesys.hu/">Pursued Maps</a></li>
          </ul>
        </div>
        <div class="col-6 col-md">
          <h5 style="font-weight: bold;">New Releases <i class="fa fa-street-view" aria-hidden="true"></i></h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="https://virtualvacation.us/explore">Easy Expedition <i class="fa fa-globe" aria-hidden="true"></i></a></li>
            <li><a class="text-muted" href="https://virtualvacation.us/driver">Driving Tour <i class="fa fa-car" aria-hidden="true"></i></a></li>
            <li><a class="text-muted" href="https://virtualvacation.us/walk">Walking Tour <i class="fa fa-users" aria-hidden="true"></i></a></li>
            <li><a class="text-muted" href="https://virtualvacation.us/livecam">LIVE Footage Tour <i class="fa fa-camera" aria-hidden="true"></i></a></li>
          </ul>
        </div>
        <div class="col-6 col-md">
          <h5 style="font-weight: bold;">Share Us <i class="fa fa-share-square-o" aria-hidden="true"></i></h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fvirtualvacation.us%2Fguess&amp;text=This%20guessing%20game%20pops%20you%20into%20the%20ambience%20of%20a%20random%20city%20and%20you%20have%20to%20guess%20where%20you%20are%20at.%20You'll%20be%20able%20to%20see%20cars%20driving%20around%20you%20and%20people%20walking.%20Can%20you%20get%20100%25%3F">Twitter <i class="fa fa-twitter" aria-hidden="true"></i></a></li>
            <li><a class="text-muted" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fvirtualvacation.us%2Fguess">Facebook <i class="fa fa-facebook" aria-hidden="true"></i></a></li>
            <li><a class="text-muted" href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fvirtualvacation.us%2Fguess&amp;media=https%3A%2F%2Fvirtualvacation.us%2Fstatic%2Funsplash1.jpg&amp;description=This%20guessing%20game%20pops%20you%20into%20the%20ambience%20of%20a%20random%20city%20and%20you%20have%20to%20guess%20where%20you%20are%20at.%20You'll%20be%20able%20to%20see%20cars%20driving%20around%20you%20and%20people%20walking.%20Can%20you%20get%20100%25%3F">Pinterest <i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
            <li><a class="text-muted" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fvirtualvacation.us%2Fguess&amp;title=This%20guessing%20game%20pops%20you%20into%20the%20ambience%20of%20a%20random%20city%20and%20you%20have%20to%20guess%20where%20you%20are%20at.%20You'll%20be%20able%20to%20see%20cars%20driving%20around%20you%20and%20people%20walking.%20Can%20you%20get%20100%25%3F">LinkedIn <i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
          </ul>
        </div>
<!--         <div class="col-6 col-md">
          <h5 style="font-weight: bold;">Resources</h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="#">Business</a></li>
            <li><a class="text-muted" href="#">Education</a></li>
            <li><a class="text-muted" href="#">Government</a></li>
            <li><a class="text-muted" href="#">Gaming</a></li>
          </ul>
        </div> -->
        <div class="col-6 col-md">
          <h5 style="font-weight: bold;">About <i class="fa fa-info" aria-hidden="true"></i></h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="https://virtualvacation.us/our-mission">About</a></li>
            <li><a class="text-muted" href="https://virtualvacation.us/our-mission">Our Mission</a></li>
            <li><a class="text-muted" href="https://virtualvacation.us/our-mission">Privacy</a></li>
            <li><a class="text-muted" href="https://virtualvacation.typeform.com/to/VAdncnhj">Submit Video</a></li>
          </ul>
        </div>
      </div>
      <style>
      </style>
              <small style="color: #8c8c8c;">virtualvacation.us © 2021</small>
              <small style="color: #8c8c8c;" id="hoverablething"><br>Explore At Home</small>

    </footer>

<!-- <div class="footer-tag"> -->
<!-- <p style="margin-bottom: -100%;">virutalvacation.us &copy; 2020</p> -->
<!-- </div> -->
</div>
<!--Content ends-->
<!-- <footer>
Hi
</footer> -->
<style>
* {
  box-sizing: border-box;
}
.video-background {
  background: #000;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /*z-index: -99;*/
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground {
    width: 300%;
    left: -100%;
  }
}
@media all and (max-width: 600px) {
  .vid-info {
    width: 50%;
    padding: 0.5rem;
  }
  .vid-info h1 {
    margin-bottom: 0.2rem;
  }
}
@media all and (max-width: 500px) {
  .vid-info .acronym {
    display: none;
  }
}
.back-mybtn {
/*  position: fixed;
  top: 0.4%;
  left: 0.5%;*/
  color: white;
  font-weight: bold;
  text-shadow: -2px -2px 0 rgba(204, 0, 0, 1),
               2px -2px 0 rgba(204, 0, 0, 1),
               -2px 2px 0 rgba(204, 0, 0, 1),
               2px 2px 0 rgba(204, 0, 0, 1),
               -3px 0 0 rgba(204, 0, 0, 1),
               3px 0 0 rgba(204, 0, 0, 1),
               0 -3px 0 rgba(204, 0, 0, 1),
               0 3px 0 rgba(204, 0, 0, 1);
  text-transform: uppercase;
}


.forward-mybtn {
  opacity: 0.885;
  position: fixed;
  bottom: 0%;
  /*width: 60%;*/
  color: white;
  font-weight: bold;
  text-transform: uppercase;
      right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
}
.forward-mybtn:hover {
  transform: scale(1.02);
  opacity: 1;
}
.fade.in {
  opacity: 1;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.modal-backdrop .fade .in {
  opacity: 0.5 !important;
}


.modal-backdrop.fade {
    opacity: 0.5 !important;
}
.modal-header {
    padding-top: 0.2rem;
    padding-bottom: 0.3rem;
}
.modal-footer {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}
.modal-body {
  padding: 0 0 0 0;
}
#mapid {
  height: 415px;
  /*width: 100%;*/
  /*z-index: 9000000;*/
}
.w3-button {
  border-radius: 4.3px;
}
.w3-button:hover {
  background-color: inherit;
}
#future-c {
  display: none;
}
#f-c {
  display: none;
}
#secondary-button {
  display: none;
}

</style>
    <!-- <input type="hidden" id="refresh" value="no"> -->
    
  <script src="confetti.js"></script>
  <script>confetti.start(1000)</script>

<style>

.container{
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.nav{
    width: 100%;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid rgba(255,255,255,.05);
    transition: height .5s ease;
}

.nav a{
    text-decoration: none;
    color: #fff;
    font-size: 1.6rem;
}

.nav .logo{
    font-size: 3.5rem;
    font-weight: bold;
}

.nav-list{
    list-style: none;
    display: flex;
    margin-right: auto;
    margin-left: 4rem;
}

.nav-link{
    margin: 0 2rem;
    position: relative;
}

.nav-link::after{
    content: '';
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: -3px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s ease;
}

.nav-link:hover::after{
    transform: scaleX(1);
}

#nav-cta{
    display: inline-block;
    background-color: #fff;
    color: #313131;
    padding: 1rem 2rem;
    border-radius: 2rem;
    transition: background-color .5s ease;
}

#nav-cta:hover{
    background-color: #d3d3d3;
}


/*Apply styles after scroll*/
.scrolling-active{
    background-color: #fff;
    box-shadow: 0 3px 1rem rgba(0,0,0,.1);
}

.scrolling-active .nav{
    height: 6.6rem;
}

.scrolling-active .nav a{
    color: #313131;
}

.scrolling-active #nav-cta{
    background-color: #313131;
    color: #fff;
}

.scrolling-active #nav-cta:hover{
    background-color: #151515;
}

.scrolling-active .nav-link::after{
    background-color: #313131;
}

/*Apply styles after scroll end*/


/* Hero Demo Content*/
.hero{
    width: 100%;
    height: 100vh;
    background: url("mountain-large.jpg") center no-repeat;
    background-size: cover;
    position: relative;
}

.hero::after{
    content: '';
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
}

.demo-content{
    width: 100%;
    height: 200vh;
    background-color: #fff;
}
/* Hero end*/
</style>
<script type="text/javascript">

</script>


<script src="https://afarkas.github.io/lazysizes/plugins/bgset/ls.bgset.min.js"></script>
  <script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<!-- <script src="https://static.jsbin.com/js/render/edit.js?4.1.8"></script> -->
<style>
#contents {
  /*position: relative;*/
  transition: .3s;
  background-color: #2a2b3d;
}


.welcome {
  color: #CCC;
  border-radius: 5px;
  margin-top: 1%;
}
.welcome .bg-dark {
  padding-top: 11.5px;
  padding-bottom: 10px;
  border-radius: 5px;
}

@media only screen and (max-device-width: 800px) {
.welcome .bg-dark {
  padding-left: 10px;
  padding-right: 10px;
}
.welcome {
  margin-top: 10px;
}
}

.welcome h2 {
  font-family: Calibri;
  font-weight: 100;
  margin-top: 0
}
.welcome .calibri {
  font-family: Calibri;
  font-weight: 100;
  margin-top: 0
}
.welcome p {
  color: #999;
}




</style>
  <script src="confetti.js"></script>


</body></html>