@charset "UTF-8";

body {
  margin: 0;
  font-family: 'Muli', sans-serif;
  font-family: 'Lato', sans-serif;
}

p.skipnav{margin:0px; padding-left:10px; font-size: 13px}

label {
width: 700px;
display: inline-block;
margin-left: 30px
}

p.download {text-align: right}

ol.normal {padding-Left: none; color: #585858;
		font-family: 'Muli', sans-serif;
		font-size: 12pt;
		line-height: 1.75;
	}

fieldset {border: dotted 1px; margin-left: 30px}

p.quiz {font-weight: bold;
font-size: 20px}

legend.quiz {font-weight: bold;
font-size: 20px;
margin-bottom: 8px;
	margin-left: 30px;
	margin-top: 20px;
  font-family: 'Lato', sans-serif;
  font-size: 18px;

  text-transform: uppercase;

}}

p.answer {border-style:dashed; border-width: medium; padding: 5px; margin-left: 10px; width: 700px}


.giffy {text-align: left}

.donut {text-align: center}

button.quiz {
    display: block;
    margin-top: 1vw;
    margin-left: 2vw;

    text-transform: uppercase;

border-radius: 1em;

background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 1vw 2vw;
  text-align: center;
  text-decoration: none;
}

button.quiz:hover{
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}

.button-two {
  border-radius: 4px;
  background-color:#d35400;
  border: none;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  background:#007CB3;
  font-family: 'Lato', sans-serif;
  color: white;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  font-size:16px;
	margin-left: 30px

}

#toggletest {width: 100%}

.button-one{border:none; color:#075FAD;}

.button-two span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button-two span:after {
  content: '»';
  font-size: 25px;
  position: absolute;
  opacity: 0;
  top: -6px;
  right: -20px;
  transition: 0.5s;
}

.button-two:hover span {
  padding-right: 25px;
}

.button-two:hover span:after {
  opacity: 1;
  right: 0;
}

h5.listicle {text-align: left;
font-family: 'Lato', sans-serif;
  font-size: 25px;
	font-weight: bold;
color: #000;
margin-bottom: 0px;
margin-top: 20px;
margin-left: 30px;}

h4.listicle {text-align: left;
font-family: 'Lato', sans-serif;
  font-size: 25px;
	font-weight: bold;
color: #000;
margin-bottom: 0px;
margin-top: 20px;
margin-left: 30px;
text-transform: none}

p.buzz {max-width: 90%}

#templatecontent {
	width: 69%;
	float: left;
	padding-bottom: 100px;
}



#cassette {margin-left: 50px;
	margin-right: 90px
}

img.center {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 70%;
}

.intro {
  position: absolute;
  top: 30%;
  margin: 0 auto;
  left: 0;
  right: 0;
  font-size: 45px;
  text-align: center;
  font-style: italic;
}
.wrapper {
  overflow: hidden;
}

.sliding-background {
  background: url("../media/img/test.jpg") repeat-x;
  height: 750px;
  width: 3350px;
  animation: slide 180s linear infinite;
}

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
  }
}

/* Type */

  	body, input, select, textarea {
		color: #585858;
		font-family: 'Muli', sans-serif;
		font-size: 12pt;
		font-weight: 300;
		line-height: 1.75;
	}




h4{
margin-left: 50px;
  font-family: 'Lato', sans-serif;
  font-size: 18px;

  text-transform: uppercase;

}



h4.table {
align-content: center;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
	text-transform: uppercase;}

h5 {text-align: center;
font-family: 'Lato', sans-serif;
  font-size: 18px;
color: #FAA43A;
margin-bottom: 0;
margin-top: 50px}


h4.graph {text-align: center;
font-family: 'Lato', sans-serif;
  font-size: 18px;
color: #E17705;
margin-bottom: 0;
margin-top: 50px;
text-transform: none}

h5.appendix {text-align: left;
font-family: 'Lato', sans-serif;
  font-size: 1.2em;
margin-bottom: 0px;
margin-top: 20px;
margin-left: 30px;
text-transform: uppercase;
color: #00B4F1}

h4.appendix {text-align: left;
font-family: 'Lato', sans-serif;
  font-size: 1.2em;
margin-bottom: 0px;
margin-top: 20px;
margin-left: 30px;
text-transform: uppercase;
color: #007CB3}

blockquote {
  border-left: solid 4px #007CB3;
	font-style: italic;
  margin: 3em 0 3em 5em;
  padding: 1em 1em 0.5em 2em;
}

.notabene {font-style:normal}

/* Header Styles */

  .header {
      height:175px;
      background:#ffffff;

      border:0px solid #CCC;
      width:100%;
      margin:0px;
      background-image:linear-gradient(rgba(0, 0, 0, 0.2), rgba(170, 170, 170, 1)),
		  url('../media/img/headertest.jpg');}

table {
  border-collapse: collapse;
  margin-left: 30px;
}

table, th, td {
  border: 1px solid black;
}

td {padding: 3px}

td.centertable {text-align: center}



th {text-align: center;
padding: 5px;
font-weight: bold}

  .content {
      width:960px;
      background: #F0F0F0;
      border: 1px solid #CCC;
      height: 2000px;
      margin: 20px auto;
	  z-index: 0;
  }

  .text {
    font-family: 'Lato', sans-serif;
    color: #FFFFFF;
      font-size: 24px;
  }

  h1 {
    font-family: 'Lato', sans-serif;
    color: #FFFFFF;
      font-size: 2.75em;
    font-weight: 700;
    line-height: 1.3;
    margin: 0px;
	padding: 0px;
    letter-spacing: -0.035em;
	  text-align:center;

}


h1.alt {
  width: 100%;
  font-family: 'Lato', sans-serif;
  color: #FFFFFF;
    font-size: 2.75em;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 1em 0;
  margin-bottom: 0; padding-bottom: 0;
  letter-spacing: -0.035em;
  text-align: center;
position: absolute;
  text-shadow: black 1px 2px;

}

 h2.section {
margin-left: 30px;
    font-Family: 'Oswald', Sans-Serif;
  font-size: 36px;
	  text-transform: uppercase;
color: #007FAD;
margin-top: 30px;
padding-top: 0}

h3{
margin-left: 30px;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 8px;

}

p.author {font-family: 'Lato', sans-serif;
color: #FFFFFF;
font-size: 1.5vw;
text-transform: uppercase;
font-weight: bold;
text-align: center;
}


  p {
		margin: 10px 10px 10px 30px;
		font:"Courier New", serif;
	}

  li{
    margin: 10px 10px 10px 30px;
    color: rgba(48, 69, 92, 0.8);
    font-size: 1.1em

  }

  ul.transcript{
    list-style: none;
     background-color: #f5f4f2;
	  border: medium;
    filter: drop-shadow(1px 1px 3px gray);
	  margin-left: 30px;
	  margin-right: 0px;
	  padding-bottom: 10px;
width: 95%}


  ul.notes{
    list-style: none;
    margin: 0px 0px 0px 0px;
  }

/*shadows*/

hi{
  margin: 0px 50px 0px 0px;
font: sans-serif
}
.blue-text-shadow {
  text-shadow: #007FAD 3px 1.5px;
}
.black-text-shadow {
  text-shadow: black 1px 2px;
}

  /* Footer Styles */

.footer {
  float: left;
  width: 100%;
  background-color: #ececec;
  background: linear-gradient(#fff, #a2a2a2);
  text-transform: uppercase;
  text-align: center;
  font-family: 'Lato', sans-serif;
  color: gray;
  font-size: 1.2vw;
  font-weight: 500;
  color: gray;
  margin-top: 15px;
  margin-right: auto;
  padding-left: auto;
padding-top: 18px;
padding-bottom: 15px}

	.footershortpage  {
  float: left;
  background-color: #ececec;
  background: linear-gradient(#fff, #a2a2a2);
display: flex;
  justify-content: center;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  color: gray;
  font-size: 1vw;
  font-weight: 500;
  color: gray;
  margin-top: 300px;
  margin-right:30px;
  padding-top: 1%;
  padding-left: 4em;
  padding-bottom: .5%;



}

img.cc {vertical-align: middle; padding-top: 1px}


p {font-size: 1.1em}


/* Link styles */
/*next page link*/
a.nextlink:link {color:white; background-color: #007FAD; text-transform: uppercase; font-weight: bold; text-decoration: none; }
a.nextlink:hover {color:white; background-color: #007FAD; text-transform: uppercase; font-weight: bold;text-decoration: underline; }
a.nextlink:visited {color:white; background-color: #007FAD; text-transform: uppercase; font-weight: bold;}



/* unvisited link */
a:link {
    color: #007FAD;
    text-decoration: none;
}

a.alt:link {color: #FFFFFF;
    text-decoration: none}

a.figlink:link {color: #FFF;
    text-decoration: underline}


/* visited link */
a:visited {
    color: #007FAD;
    font-weight: bold;
    text-decoration: none;
}
a.alt:visited {
    color: #FFFFFF;
    text-decoration: none;
}

a.figlink:visited {
    color: #FFF;
    text-decoration: underline;
}

/* mouse over link */
a:hover {
    color: #007FAD;
    text-decoration: underline;
}
a.alt:hover {
    color: #FFFFFF;

    text-decoration: none;
}


/* selected link */
a:active {
    color: #007FAD;
    text-decoration: none;
}

/* LETTERS */
div.foo{
  width: 100%;
  font-family: 'Lato', sans-serif;
  margin: 0 auto;
  text-align: center;
  position: absolute;

}
div.author{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  z-index: 1;
  bottom: 20px;
  }

.letter{
  display: inline-block;
  font-weight: 900;
  font-size: 5em;
  margin: 0.2em;
  position: relative;
  color: #007FAD;
  transform-style: preserve-3d;
  perspective: 400;
  z-index: 1;
}
.letter:before, .letter:after{
  position:absolute;
  content: attr(data-letter);
  transform-origin: top left;
  top:0;
  left:0;
}
.letter, .letter:before, .letter:after{
  transition: all 0.3s ease-in-out;
}
.letter:before{
  color: #fff;
  text-shadow:
    -1px 0px 1px rgba(255,255,255,.8),
    1px 0px 1px rgba(0,0,0,.8);
  z-index: 3;
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}
.letter:after{
  color: rgba(0,0,0,.11);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}
.letter:hover:before{
  color: #fafafa;
  transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
}
.letter:hover:after{
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}

img.slide {max-width: 100%; display: block;     margin-left: auto;
    margin-right: auto;}


figure {float: left;
max-width: 350px;
text-align: center;
filter: drop-shadow(1px 1px 3px gray);
margin-left: 29px}


figure.right2 {float: right;
max-width: 350px;
text-align: center;
filter: drop-shadow(1px 1px 3px gray)}

figure.full {float: left;
max-width: 90%;
text-align: center;
filter: drop-shadow(1px 1px 3px gray);}

figure.fullbar {float: left;
max-width: 100%;
text-align: center;
border: none}


figcaption {
background-color: #007FAD;
color: #fff;
font-weight: 500;
font-size: .8em;
padding: 1%;
max-width: 100%}





figcaption.fullsize {
background-color: #007FAD;
color: #fff;
font-weight: 500;
font-size: .8em;
max-width: 100%;
padding: 1%}

img.buzzfeed {display: block; max-width: 90%; margin-left: 30px}

img.figure {display: block; max-width: 350px}

img.enlarge {display: block; max-width: 100%}
img.enlarge:hover {transition: transform 2.5s; transform: scale(1.75) translate(150px); z-index: 1;}
img.enlarge:focus {transition: transform 2.5s; transform: scale(1.75) translate(150px); z-index: 1;}

img.large {display: block; max-width: 100%}

h6{text-align: center}

/*image styles*/


.image.left, .image.right {
  max-width: 40%;
}

  .image.left img, .image.right img {
    width: 100%;
  }

.image.left {
  float: left;
  padding: 0 1.5em 1em 0;
  top: 0.25em;
}

.image.right2 {
  float: right;
  padding: 0 0 1em 1.5em;
  top: 0.25em;
}
.image.fit {
  display: block;
  margin: 0 0 2em 0;
  width: 100%;
}

  .image.fit img {
    width: 100%;
  }

.image.main {
  display: block;
  margin: 0 0 3em 0;
  width: 100%;
}

  .image.main img {
    width: 100%;
  }


/* arrow*/
i {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

/*Switch for animated GIFs*/

/*CODE GOES HERE*/

/* summary style (for transcripts and other collapsible elenments) */
/* old style arrow: list-style-image: url(media/img/arrowtranscript.png);
details[open] summary{list-style-image: url(media/img/arrowtranscript2.png} */
summary {

  color: #007FAD;
  padding-top: 1em;
  margin-left: 0px;

}

summary.menutoggle {margin: auto}

details[open] summary{
color: #FFFFFFF; }

.video-container {
    overflow: hidden;
    position: relative;
    width: 100%;
	margin-right: 30px;
	margin-left: 30px;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*
summary::-webkit-details-marker {
  background: url(../media/img/arrowtranscript.png);
  color: transparent;
	margin-left: 45px;
	z-index: 1;}

}summary::-webkit-details-marker {
  background: url(../media/img/arrowtranscript.png);
  color: transparent;
	margin-left: 45px;
  z-index: 2;
	padding-left: 20px;
}
*/