/* Main Styles */

html {

	width:100%;
    height:100%;
}
body {
	/* normalize font size for em */
	font-size: 16px;
	width:100%;
    height:100%;

	/* temp styles */
	background-color: rgba(200, 200, 200, 1);
}
	

/* Typography Elements */

/* font faces */
@font-face {
	font-family: Lato-Regular;
	src: url(../google_fonts/Lato-Regular.ttf);
}
@font-face {
	font-family: Lato-Bold;
	src: url(../google_fonts/Lato-Bold.ttf);
}
@font-face {
	font-family: Lato-Italic;
	src: url(../google_fonts/Lato-Italic.ttf);
}
@font-face {
	font-family: LobsterTwo-Regular;
	src: url(../google_fonts/LobsterTwo-Regular.ttf);
}
@font-face {
	font-family: LobsterTwo-Bold;
	src: url(../google_fonts/LobsterTwo-Bold.ttf);
}

/* GDES 315 */
h1 {
	font-family: Lato-Regular;
	font-size: 4.5em;
	line-height: 1.3em;
} 

/* Digital and Emerging Media Design */
h2 {
	font-family: LobsterTwo-Regular;
	font-size: 4.5em;
	line-height: 1.3em;
	text-align: right;
	color: rgba(255, 0, 0, 1);
}

/* Section Headers */
h3 {
	font-family: LobsterTwo-Regular;
	font-size: 3.75em;
	line-height: 1.3em;
	padding-bottom: 10px;
}

/* Subsection Headers */
h4 {
	font-family: LobsterTwo-Regular;
	font-size: 3em;
	line-height: 1.25em;
	color: rgba(255, 0, 0, 1);
	padding-bottom: 20px;
}

/* Subheadings */
h5 {
	font-family: Lato-Regular;
	font-size: 30px;
	line-height: 36px;
	color: rgba(0, 0, 0, 0.8);
}

/* Paragraphs */
p {
	font-family: Lato-Regular;
	font-size: 1em;
	line-height: 1.5em;
	padding-bottom: 2em;
}

/* Italics */
em {
	font-family: Lato-Italic;
}

/* Bold */
strong {
	font-family: Lato-Bold;
}

/* Lists */
ul {
	font-family: Lato-Regular;
	font-size: 1em;
	line-height: 1.25em;
	padding-bottom: 1em;
}

section li {
	padding-bottom: 0.5em;
}
section li:before {
  content:'\2022';
  display: block;
  position: relative;
  max-width: 0px;
  max-height: 0px;
  left: -15px;
  top: -0px;
  color: rgba(255, 0, 0, 1);
}

/* Quotes */
blockquote {
	padding-bottom: 10px;
}

blockquote p {
	font-family: LobsterTwo-Regular;
	font-size: 3em;
	line-height: 1.3em;
	color: rgba(255, 0, 0, 1);
	padding-bottom: 0px;
}
blockquote p:before {
  content: url(../images/quotes.png);
  display: block;
  position: relative;
  max-width: 0px;
  max-height: 0px;
  left: -125px;
  top: -50px;
  color: rgba(0, 0, 0, 1);
}

blockquote cite {
	display: block;
	font-family: Lato-Regular;
	font-size: 1.875em;
	line-height: 1.3em;
	text-align: right;
	color: rgba(0, 0, 0, 0.8);
}

/* Buttons */
button {
	font-family: LobsterTwo-Regular;
	font-size: 3em;
	padding: 10px 20px 10px 15px;
	background-color: rgba(255, 255, 255, 0.5);
	border: none;
	float: right;
}

button:hover{
    background-color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}

span {}





/* Links */
a:link {     	/* unvisited link */
	color: rgba(255, 0, 0, 1);
}
a:visited { 	/* visited link */
	color: rgba(255, 0, 0, 1);
}
a:hover {  		/* mouse over link */
	color: rgba(0, 0, 0, 0.8);
}
a:active {  	/* selected link */
	color: rgba(255, 0, 0, 1);
}


/* Layout Elements */
header {}

nav {
	position: fixed;
	background-color: rgba(255, 255, 255, 0.75);
	width: 100%;
	text-align: center;
	height: 50px;
	padding-top: 15px;
	z-index: 5;
}
nav ul {
	display: inline-block;
	font-family: LobsterTwo-Regular;
}
nav li {
	display: inline-block;
	font-size: 1.5em;
	line-height: 1.5em;
	text-decoration: none;
	color: rgba(0, 0, 0, 1);
}
nav li:hover {
	color: rgba(0, 0, 0, 0.8);
	cursor: pointer;
}
nav .active {
	font-family: LobsterTwo-Bold;
	color: rgba(255, 0, 0, 1);
}

.bullet {
	font-family: LobsterTwo-Regular;
	font-size: 1em;
	line-height: 1.5em;
	color: rgba(0, 0, 0, 1);
}

section {
	padding-top: 75px;
	padding-bottom: 75px;
}

.slide {
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    position: relative;
    box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
    overflow: auto;
}

.container_12 {
	background-color: rgba(255, 255, 255, 0.5);
	padding: 25px;
}

#overview1 {
	padding-top: 10em;
	background-image:url(../images/slide1.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#overview1 p {
	font-size: 2.25em;
	line-height: 1.4em;
	padding-bottom: 0px;
}

#overview2 {
	background-image:url(../images/slide2.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#projects {
	background-image:url(../images/slide3.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#projects h4 , #projects h5 {
	padding-bottom: 0px!important;
	text-align: right;
}

#supplies {
	background-image:url(../images/slide4.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#grading1 {
	background-image:url(../images/slide5.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#grading2 {
	background-image:url(../images/slide6.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#grading2 h4 , #grading2 h5 {
	padding-bottom: 0px!important;
	text-align: center;
}

#policies {
	background-image:url(../images/slide7.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#howtodowell {
	background-image:url(../images/slide8.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#howtodowell h4 {
	text-align: right;
}

footer {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.5);
}
footer p {
	font-family: LobsterTwo-Regular;
	font-size: 1.5em;
	line-height: 1.5em;
	padding-bottom: 10px;
}

footer #credits {
	font-family: Lato-Regular;
	font-size: 0.75em;
	line-height: 1.3em;
}

/* Images */
img {}

#audlogo {
	padding-right: 10px;
	vertical-align: top;
}

figure {}

.arc path {
    stroke: rgba(200, 200, 200, 1);
    stroke-width: 5px;
}