/* -- Begin Browser Style Reset -- */
 /* ...by  Creative Graphic Biz */

/* Browser Window and General Defaults */
* {
position: static; vertical-align: bottom;
box-sizing: border-box; margin: 0; border: 0 solid black;
padding: 0; background-clip: border-box;
font: inherit;  line-height: inherit; word-spacing: inherit; letter-spacing: inherit;
}
html {
position: absolute; width: 100%; height: 100%;
overflow-x: auto; /* Show a horizontal  browser scroll bar when needed. */
overflow-y: scroll; /* Always show a vertical browser scroll bar to prevent  short page shifting, and also to allow accurate calculation of vw units.  (On browsers which float and hide scrollbars, this won't matter anyway.) */
}
body {
position: relative;
min-height: 100% ;  /* Fill the screen vertically even if there is little  content. */
max-height: 999999px;  /* Prevent font boosting on small screen devices. */
background: white;
font-family: Arial, Helvetica, Liberation-Sans, sans-serif;  /* Set  default font face. These Windows, Mac, and Linux varients are metrically identical. */
font-size: 18px;  line-height: 1.15; Xword-spacing: normal; Xletter-spacing: normal; /* (Letter and word spacing might cause issues in Opera.) */
font-weight: normal;  font-style: normal;  text-decoration: none; color: black;
/* ...Set font defults. Note: Using px for font size on body gives you an absolute reference for scaling. */

}

/* Images and Paragraphs*/
img {
display: block;
vertical-align: baseline; /* Set vertical alignment for when inline block is used. */
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1em; font-size: 150%;
}
p {
margin-bottom: 1em;
}

/* Tables */
table {
table-layout: fixed; border-spacing: 0; border-collapse: collapse; empty-cells: show;
}
td {
vertical-align: middle; text-align: center;
}

/* Links */
a:link, a:focus, a:visited {
color: inherit;  text-decoration: inherit; /* Remove browser link styling... */
}
a:hover, a:active {
color: inherit; text-decoration: underline; /* ...but still underline on hover. */
}

/* -- End Browser Style Reset -- */




/* -- Begin Load Fonts -- */

@font-face {
font-family: 'Varta';
src: local('Varta'), local('Varta-Regular'),  /* Use local font if it exists... */
url('fonts/varta-regular-webfont.woff') format('woff');  /*...otherwise use server font. */
}
@font-face {
font-family: 'Fredoka One';
src: local('Fredoka One'), local('FredokaOne-Regular'),  /* Use local font if it exists... */
url('fonts/fredokaone-regular-webfont.woff') format('woff');  /*...otherwise use server font. */
}

/* -- End Load Fonts -- */






#page {
display: block; position: absolute;
width: 100%; 
}

#page-child {
padding-top: 6vw;
}


#fadeout-top,
#fadeout-bottom {
display: block; position: fixed;
width: 100%; height: 15vw; 
z-index: 1;
background-image: linear-gradient(0deg,hsla(1, 0%, 100%, 0),hsla(0, 0%, 100%, 1) 50%);

}
#fadeout-top > span {
display: inline-block;
font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
color: darkgrey;
font-size: 3.5vw;
margin: 1em; 
}

#fadeout-bottom {
bottom: 0px; height: 15vw;
background-image: linear-gradient(180deg,hsla(1, 0%, 100%, 0),hsla(0, 0%, 100%, 1) 50%);
}
#fadeout-bottom > img {
 bottom: 1vh; margin: 0px auto; 
 height: 20%; margin-top: 10%;
 
 }


.logo {
width: 90%; margin: 5% auto 10%;
}

.info {
display: inline-block;
font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
color: darkgrey;
font-size: 3.5vw;
margin: 1em; 
padding-bottom: 20vw;

}

/* -- Begin Verticle Mobile  -- */

#page-child { 
display: block; position: relative; 
overflow: visible;
margin-left: auto; margin-right: auto;  /* horizontal center*/
max-width: 100%; /* allow space for vertical scroll bar */
text-align: center; 
}


@media (min-aspect-ratio: 1/1) {
#page-child { 
width: 150vh;  height: 100vh;

}
}

@media (max-aspect-ratio: 1/1) {
#page-child { 
width: 100vw;  height: 100vw;
}
}

/* -- End Verticle Mobile  -- */


/* -- Begin Desktop -- */
@media screen and (min-width: 801px) {

.logo {
display: inline-block;
width: 38%; margin: 5% 2%;
}

#fadeout-top > span {
font-size: 2vw;
}



}