https://virtualvacation.us/

ID de exploración:: 69879ede-9d1c-4a22-a6a6-5f9a5f685072Finalizado
URL enviada:: https://virtualvacation.us/
Informe finalizado:: 18 dic 2024, 11:13:21
Enlaces: 5 encontrados

Los enlaces salientes identificados en la página
Enlace	TEXTO
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
Variables JavaScript: 139 encontradas

Las variables JavaScript globales cargadas en el objeto de ventana de una página son variables declaradas fuera de las funciones y a las que se puede acceder desde cualquier lugar del código en el ámbito actual
Nombre	Tipo
0	object
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
$	function
jQuery	function
Popper	function
bootstrap	object
gtag	function
dataLayer	object
Mensajes de registro de la consola: 4 encontrados

Mensajes registrados en la consola web
Tipo	Categoría	Registrar
error	network	URL https://virtualvacation.us/jquery.lazy.min.js TEXTO Failed to load resource: the server responded with a status of 404 ()
error	other	URL https://platform-api.sharethis.com/panorama.js TEXTO SYNC.JS: Aborting because TCF string was expected but not present.
error	other	URL https://platform-api.sharethis.com/panorama.js TEXTO 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 TEXTO SYNC.JS: Aborting due to above errors.
HTML

El cuerpo HTML sin procesar de la página
<!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>