/* Tiny reset thingy */
body,html{margin:0;padding:0;font-family: 'FrugalSans-Light', Fallback, sans-serif; color: black;background-color:#FFF;}

@font-face {
  font-family: "FrugalSans-Light";
  src: url("./fonts/frugal-sans-light.eot"); /* IE9 Compat Modes */
  src: url("./fonts/frugal-sans-light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/frugal-sans-light.otf") format("opentype"), /* Open Type Font */
    url("./fonts/frugal-sans-light.svg") format("svg"), /* Legacy iOS */
    url("./fonts/frugal-sans-light.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./fonts/frugal-sans-light.woff") format("woff"), /* Modern Browsers */
    url("./fonts/frugal-sans-light.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 100vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 2px;
}

.section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 60vh;
  
  /* For text formatting. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  //text-shadow: 0 0 5px #000;
  font-family: 'FrugalSans-Light', Fallback, sans-serif; 
}

.parallax::after {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
  transform: translateZ(-1px) scale(1.5);
  /* Force the background image to fill the whole element. */
  background-size: 100%;
  /* Keep the image from overlapping sibling elements. */ 
  z-index: -1;
}

/* The styling for the static div. */
.static {
  background: #333333;
  
}

.bg0::after {
  background-image: url('openset_bg_dark.jpg');
    background-size: auto;
    background-position: center;
}


.bg1::after {
  background-image: url('img3b.jpg');
  background-position: center; 
}

.bg2::after {
  background-image: url('vtx5.jpg');
  background-position: center; 
}



/* unvisited link */
a:link {
    color: #33B8CA;
}

/* visited link */
a:visited {
    color: #33B8CA;
}

/* mouse over link */
a:hover {
    color: #33B8CA;
}

/* selected link */
a:active {
    color: #33B8CA;
}

p {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5%;
    margin-left: 5%;
}

h1 {
    margin-top: 10px;
    margin-bottom: 0px;
    margin-right: 5%;
    margin-left: 5%;
}

h2 {
    margin-top: 10px;
    margin-bottom: 0px;
    margin-right: 5%;
    margin-left: 5%;
}

h3 {
    margin-top: 10px;
    margin-bottom: 0px;
    margin-right: 5%;
    margin-left: 5%;
}

.headtitle
{
	background-color:#33B8CA;
	color:white;
	padding: 10px;
	background-image: url('osbg1.png');
}