/* FOOTER STYLING */

hr {
	border-top: 2px solid #000000;
}

hr.about {
	border-top: 2px solid #ffffff;
}

div.smallfooter {
	height: 100px;
	padding-top: 25px;
	font-size: 18px;
	text-align: center;
}

footer {
	height: 100px;
	padding-top: 25px;
	font-size: 18px;
  text-align: center;
}

span.orig {
	margin-left: 25px;
}

span.copy {
	margin-right: 25px;
}

span a {
	font-size: 18px;
}

footer.about span a {
	color: #ffffff;
}

#marq {
	margin: 1em auto;  
	overflow: hidden; 
	white-space: nowrap; 
}

#orig {
	display: inline-block; 
	transform: translatex(0); 
	animation: marquee 20s infinite normal linear 1s; 
}

#copy {
	margin: -50em auto;
}

@keyframes marquee {
  0% {transform: translatex(0); }
  100% {transform: translatex(-50%); }
}

@media all and (max-width: 800px) { 
    div.bigfooter {
        display: none;
        }
    } 

@media all and (min-width: 801px) { 
    div.smallfooter {
        display: none;
        }
    } 


/* IMAGE HOVER STYLING */

#tbt {
  width: 400px;
  height: 500px;
  display: none;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -250px 0 0 -200px;
  z-index: 4;
}

.marq1 {
  color: yellow;
  font-size: 39px;
  overflow: hidden; 
  white-space: nowrap; 
}

.orig1 {
display: inline-block; 
transform: translatex(0); 
animation: marquee 10s infinite normal linear; 
}

@keyframes marquee {
  0% {transform: translatex(0); }
  100% {transform: translatex(-50%); }
}

/* CONTAINTER AND ROW/COLUMN */

.container {
	z-index: 1
}

div.col-md-6 {
	text-align: center;
	padding-bottom: 20px;
}

/* FONT STYLING */

body {
	font-family: 'Open Sans', sans-serif;
}

/* ABOUT PAGE STYLING */

body.about {
	background-color: #000000;
	color: #ffffff;
}

body.about nav a {
	color: #ffffff;
}

body.about a {
  color: #ffffff;
}


/* H1 H2 H3 P STYLING STYLING */

h1 {
	font-size: 45px;
	text-align: center;
	padding-bottom: 30px;
	padding-top: 120px;
	max-width: 875px;
	margin:0 auto;
	line-height: 1.2;
}

h1 a {
  font-size: 45px;
}

@media all and (max-width: 600px) { 
    h1 {
        font-size: 36px; 
        }
    }

@media all and (max-width: 500px) { 
    h1 {
        font-size: 24px; 
        }
    }       

h2 {
	font-size: 36px;
} 

p {
	font-size: 24px;
	text-align: center;
	max-width: 300px;
	margin:0 auto;
	padding-bottom: 20px;
	line-height: 1.2;
}

p.about {
	max-width: 700px;
  text-align: left;
}

p.about-first {
  padding-top: 120px;
  max-width: 700px;
  text-align: left;
}

@media all and (max-width: 500px) { 
    p.about, p.about-first, body.about a {
        max-width: 400px; 
        font-size: 18px;
        }
    }     

@media all and (max-width: 500px) { 
    p.about, p.about-first {
        padding-left: 10px;
        }
    }     


/* NAV AND LINK STYLING */

nav {
	text-align: center;
	position: fixed;
	word-spacing: 20px;
	top: 40px;
	width: 100%;
	z-index: 2;
}

a {
	font-size: 24px;
	color: #000000;
	text-decoration: underline;
}

a:hover {
	color: #000000;
}

nav a.active {
	text-decoration: underline;
	font-size: 24px;
}

nav a.inactive {
	text-decoration: none;
	font-size: 24px;
}

a.logo {
	cursor: default;
	z-index: 5;
	position: fixed;
	top: calc(50%);
	margin-top: -25px;
	left: 25px;
	letter-spacing: 0.02em;
	transform: rotate(270deg);
	font-size: 36px;
	text-decoration: none;
	color: white;
  	text-shadow:
   	-1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

@media all and (max-width: 800px) { 
    a.logo {
        display: none;
    }