/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/vendor/materialicons/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('/vendor/materialicons/MaterialIcons-Regular.woff2') format('woff2'),
       url('/vendor/materialicons/MaterialIcons-Regular.woff') format('woff'),
       url('/vendor/materialicons/MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-weight:300;
}

h1, h2 {
	font-weight:200;
}

h3, h4 {
	font-weight:300;
}

h5, h6 {
	margin-top:8px;
	margin-bottom:8px;
	font-weight:500;
}

h1 {
	font-size:32px;
}

h4 {
	margin-top:25px;
}

h6 {
    font-size: 0.8em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-left: 2rem;
    font-weight: 500;
}

.container {
	max-width:500px !important;
}

#page {
  height:100%;
}

#page-login {
  height:100%;
  background-image: url("/image/gulgong-street-view-background.png"); /* The image used */
  background-color: #fff; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

#content {
  padding-top:10px;
}

#sect-slider  {
	margin-top:10px;
}

#sect-slider .hidden {
	display:none;
}


#map {
  height:calc(100% - 190px);
  min-height: 200px;
}

#meta {
  padding-top:10px;
  padding-left:10px;
  padding-right:10px;
}

/* T&C page */
.form-check {
    padding-left:0;
}

#accept-form {
    margin-top:30px; 
    margin-bottom:50px;
}

#accept-input {
    width:24px; 
    height:24px;
}

#accept-input-label {
    margin-top:5px; 
    margin-left:10px;
}


/* intro page */

.tut-text {
	margin-top:10px;
	text-align:justify;
}

#cycler{position:relative;}
#cycler img{position:absolute;z-index:1}
#cycler img.active{z-index:3}

/* app page */



blockquote {
	font-weight: 300;
	position: relative;
	margin: 0;
	padding-top: 0;
	padding-left: 2rem;
	padding-right: 0;
	margin-bottom: 1rem;
	color: #3e434c;
	font-size: 16px;
}

blockquote:before,
blockquote:after {
	font-family: sans-serif;
	color: #566b75; /*#888888;*/
	position: absolute;
	font-size: 4rem;
	width: 2rem;
	height: 2rem;
	top: -1rem;
}

blockquote:before {
	content: '“';
	left: 0;
}

.alert {
    margin-bottom: 0.75rem;
}


.cfooter {
	font-size: 14px;
	margin-top:10px;
}

.cfooter a {
	color: #000;
	text-decoration: underline;
}

.credit-top {
    padding-top: 50px;
}

.gap-20 {
	margin-bottom: 15px;
}

.player {
	margin-top: auto;
	margin-bottom: auto;
}

.player i {
    line-height: 1.5;
}

.img-thumbnail {
	border: 0;
}