/*CSS Document*/

/*box-sizing reset*/
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
	color: white;
	background-color: black;
	margin: .1em;
	padding: .1em;
}

/*general reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/*font set*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, 
small, strike, strong, sub, sup, 
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, summary,
time {
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, 'Open Sans', sans-serif;
}

/*iphone fix*/
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

h1 {
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	font-size: 1.65em;
	font-weight: bold;
}

h2 {
	font-size: 1.5em;
	font-weight: bold;
}

h3 {
	font-size: 1.45em;
	font-weight: bold;
}

h4 {
	font-size: 1.3em;
	font-weight: bold;
}

h5 {
	font-size: 1.225em;
	font-weight: bold;
}

h6 {
	font-size: 1.1125em;
	font-weight: bold;
}

p {
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	width: 96%;
	padding: 0 2%;
	color: #fff;
	font-size: 1.05em;
	font-weight: normal;
}

/*link styling*/
a:link {
	text-decoration: none;
	color: #bb99bc;
}

a:visited {
	text-decoration: none;
	color: #abaace;
}

a:active {
	text-decoration: underline;
	color: #efdc12;
}

a:hover {
	text-decoration: underline;
	color: #354687;
}

/*table styling*/
table {
	width: 95%;
	background-color: #694866;
	border: thin solid #FFFFFF;
	border-collapse: collapse;
}

td, th {
	border: thin solid #FFFFFF;
	text-align: center;
	background-color: #694866;
}

/*download stlyes*/
/*link*/
#download_link:link {
	padding: .5em 1.5em;
	background-color: #7a5f7c;
	color: white; 
}

#download_link:visited {
	padding: .5em 1.5em;
	color: #fefefe;
}

#download_link:active {
	padding: .5em 1.7em;
}

#download_link:hover {
	padding: .5em 1.7em;
	background-color: #cb8aba;
	color: #eeeeee; 
	text-decoration: none;
}

/*div*/
#download_div {
	padding-bottom: 1.85em;
	padding-top: .65em;
}

/*collapsible style*/
 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #ddd;
  color: #000;
  cursor: pointer;
  padding: 1em;
  width: 95%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1em;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #999;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 1em;
  display: none;
  overflow: hidden;
  background-color: #333;
  text-align: left;
  width: 95%;
  color: white;
} 

/*nav*/

header {
width:100%; 
display:table; 
background-color:#080808; 
}

#logo {
float:left; 
font-size:2em;
text-transform:uppercase; 
color:#e8e8e8; 
font-weight:600; 
padding:.1em .1em;
}

label {
	font-size: 1.25em;
}

nav {
margin-top:0;
width:auto; 
float:right;
}

nav ul {
display:table; 
float:right;
list-style:none; 
}

nav ul li {
float:left;
background-color:#181818
}

nav ul li:last-child {
padding-right:0px;
}

nav ul li a {
color:#111; 
font-size:1.1em; 
padding: 1em 1em; 
display:inline-block; 
transition: all 0.5s ease 0s;
}

nav ul li a:hover {
background-color:#383838; 
color:#d8d8d8; 
transition: all 0.5s ease 0s;
}

nav ul li a:hover i {
color:#d8d8d8; 
transition: all 0.5s ease 0s;
}

nav ul li a i {
color:#383838; 
transition: all 0.5s ease 0s;
}


input[type=checkbox], label {
display:none;
}

/*end nav*/

/*homepage buttons*/
.showButton{
	padding: 10% 15%; 
   font-size: 88%;
   background:#999; 
   border:0 none;
   cursor:pointer;
   color: white;
   font-family: inherit;
}

.showButton:hover {
    padding: 10% 18%; 
    font-size: 88%;
    background:#555; 
    border:0 none;
    cursor:pointer;
    color: white;
}

.show_column {
  width:20%;

  float:left;
  min-height: 50px;
}

.show_row::after {
content: "";
  clear: both;
  display: table;
}	

.show_small .showButton {
	padding: 1.5em 2.5em; 
	font-size: 90%; 
	margin: .65em 0;
}

/*Footer*/
.footerButton{
	padding: 8% 7%; 
   font-size: 88%;
   background:#111; 
   border:0 none;
   cursor:pointer;
   color: white;
   font-family: inherit;
}

.footerButton:hover {
    padding: 8% 7%; 
    font-size: 88%;
    background:#333; 
    border:0 none;
    cursor:pointer;
    color: white;
}

.ft_small .footerButton {
	padding: 1.35em 1.95em; 
	margin: .2em;
}

footer {
  padding: 2% 2%;
  text-align: left;
  background-color: #323240;
  color: white;
  width: 100%;
  min-height: 50px;
}

.ft_column {
  width:25%;

  float:left;
  min-height: 50px;
}

#lower {
 width:100%;
 padding:0% 2%;
 background-color: inherit;  
 min-height:15px;
}

.ft_row::after {
content: "";
  clear: both;
  display: table;
}	

/* Media Queries
--------------------------------------------- */
@media all and (max-width : 660px) {
	.ft_column {
  		display:none;
  	}
}

@media all and (min-width : 660px) {
	.ft_small {
		display: none;
	}
}

@media all and (max-width : 600px) {
	.show_column {
  		display:none;
  	}
}

@media all and (min-width : 600px) {
	.show_small {
		display: none;
	}
}

/*navbar media*/

@media only screen and (max-width: 1440px) {
	section{
	max-width:95%;
	}

}

@media only screen and (max-width: 980px) {
header {
padding:.2em .2em;
}

#logo {
padding:0;
}

input[type=checkbox] {
position: absolute; 
top: -9999px; 
left: -9999px; 
background:none;
}

input[type=checkbox]:focus {
background:none;
}

label {
float:right; 
padding:.6em .6em; 
display:inline-block; 
cursor:pointer; 
}

input[type=checkbox]:checked ~ nav {
display:block;
}

nav {
display:none; 
position:absolute; 
right:.5em; 
top:4.5em; 
background-color:#222; 
padding:0; 
z-index:99;
}

nav ul {
width:auto;
}

nav ul li {
float:none; 
padding:0; 
width:100%; 
display:table;
}

nav ul li a {
color:#FFF; 
font-size:1.5em; 
padding: .5em .5em; 
display:block; 
border-bottom: 1px solid rgba(225,225,225,0.1);
}

nav ul li a i {
color:#ddd; 
padding-right:.3em;
}

}

@media only screen and (max-width: 568px) {
h1{padding:25px 0px;}
h1 span{display:block;}
}

@media only screen and (max-width: 480px) {
section {max-width: 90%;}
}

@media only screen and (max-width: 500px) {
nav {
display:none; 
position:absolute; 
right:.2em; 
top:6.5em; 
background-color:#222; 
padding:0; 
z-index:99;
}
}

@media only screen and (max-width: 360px) {
h1{font-size:20px;}
label{padding:5px 0px;}
#logo{font-size: 20px;}
nav{top:6.7em;}
}

@media only screen and (max-width: 320px) {
h1 {padding: 20px 0px;}
}

@media only screen and (max-height: 610px) and (orientation: portrait) {
	nav ul li a {
color:#FFF; 
font-size:1.1em; 
padding: .2em .2em; 
}
}