body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
	max-height: 100%;
	line-height: 1.5em;
	font-family: 'Open Sans';
	font-weight: 300;
	font-size: 16px;
	color: #222;
}

h1 {
	font-size: 32px;
	line-height: 1.5em;
}

h3 {
	font-size: 24px;
	line-height: 1.5em;
}

.fab {
	font-size: 24px;
	margin-top: 32px;
}

@-webkit-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#nav {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 230px; /* Width of navigation frame */
	height: 100%;
	overflow: hidden; /* Disables scrollbars on the navigation frame. To enable scrollbars, change "hidden" to "scroll" */
	background: linear-gradient(270deg, #b7c89f, #819054);
	background-size: 400% 400%;
	-webkit-animation: gradient 20s ease infinite;
	-moz-animation: gradient 20s ease infinite;
	-o-animation: gradient 20s ease infinite;
	animation: gradient 20s ease infinite;
	line-height: 2.5em;
	font-family: 'Open Sans';
	font-weight: 300;
	font-size: 16px;
}

main {
	position: fixed;
	top: 0;
	left: 230px; /* Set this to the width of the navigation frame */
	right: 0;
	bottom: 0;
	overflow: auto;
	background: #fff;
	padding: 2% 12%;
}

.innertube {
	margin: 15px; /* Provides padding for the content */
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav ul a {
	color: white;
	text-decoration: none;
}

.logo {
	max-width: 600px;
}

img {
	width: 100%;
}

.frontpage {
	text-align: center;
	background: linear-gradient(270deg, #b7c89f, #819054);
	background-size: 400% 400%;
	-webkit-animation: gradient 20s ease infinite;
	-moz-animation: gradient 20s ease infinite;
	-o-animation: gradient 20s ease infinite;
	animation: gradient 20s ease infinite;
	color: white;
}

.no-bullit ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.centered {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.privacy {
	 margin-top: 10px;
	 font-size: 11px;
}

/*IE6 fix*/
* html body {
	padding: 0 0 0 230px; /* Set the last value to the width of the navigation frame */
}

* html main {
	height: 100%;
	width: 100%;
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  	#nav {
	  	font-size: 2.5em;
  	}

  	.fab {
	font-size: 56px;
	}

	.privacy {
	 font-size: 22px;
	}

	main {
		padding: 2% 2%;
		font-size: 2em;
		line-height: 2em;
	}

	h1 {
		font-size: 2em;
	}

	h3 {
		font-size: 1.5em;
	}

}

/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

}

/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {

}

/* Portrait */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {

}

/* Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {

}

/* Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {

}

/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {

}