/*test*/

/*search page*/

#textselect {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	grid-column-gap: 2em;
	grid-row-gap: 2em;
}

.text-select-card {
	display: flex;
	flex-direction: column;
}

.text-select-body {
	flex: 1 0;
	display: flex;
	flex-direction: column;
}

.text-select-header {
	background-color:rgba(0,0,0,.85);
    color:white;
	padding: .5em;
}

.text-select-blurb {
	flex: 1 0;
	padding:1em;
	background-color: white;
}

.text-select-buttons ul {
	list-style-type: none;
	padding: 0;
	margin:0;
}

.list-group-item {
	margin:0;
	border:0;
	border-top: 1px solid #ddd;
}

.text-select-buttons ul:last-child {
	border-bottom: 1px solid #ddd;
}


/*txt page*/ 

.caesura {
	padding-left:1em;
}

.reader-container {
	line-height:2;
}

.reader-container div.reading-comp {
    transition: width 0.2s ease, margin 0.3s ease;
  }

.reading-comp p span:hover {
	cursor:help;
	color:rgb(200, 100, 50);
}

.reader-tooltip-explanation {
	color: #999;
	padding:2em;
}

.reader-tooltip-column {
	padding-right:0;
	overflow-x: hidden;
} 

.reader-tooltip {
	box-shadow: 5px 5px 5px #ccc;
	margin-top:20px;
}

.reader-tooltip p:last-child {
	margin-bottom:0;
}

.reader-tooltip-header {
	border-radius: 5px 5px 0 0;
	padding: .75em;
	background-color: rgb(200, 100, 50);
	color:white;
}

.reader-tooltip-header h3 {
	margin:0;
}

.reader-tooltip-body
 {
	padding:1em .75em;
	border: solid 1px rgb(200,100,50);
	border-radius: 0 0 5px 5px;
}

.close-icon {
	background:none;
	color:white;
	border:none;
	position:absolute;
	right:15px;
	top:25px;
}

/* facsimile page */
.facsimile-container {
	background-color: #444;
    padding: 1em;
}

.facsimile-list li {
	list-style-type: none;
}

.facsimile img {
	max-height: 100%;
	max-width: 100%;
	background-image: url("../images/transperant.png"); 
	background-repeat: no-repeat; 
	background-size: 555px 320px;
    background-position: 0px 0px;
}

.transcription-container {
	padding: .5em 1em;
	background-color:white;
}

.manuscript-viewer {
	background-color: #444;
	border-radius: 5px;
	padding:1em;
}

/* Fundamental Page Element Styles */
html {
	height: 100%;
}

body {
	position: relative;
	min-height: 100%;
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: 18px;
	background-color: #f8f8f8;
	line-height: 1.6;
	padding-bottom: 2em;
}

body p,
ol > li,
ul > li {
	font-family: Arial, "x-locale-body", sans-serif;
}

header {
	position: relative;
}

footer {
	background-color: rgba(0, 0, 0, 0.85);
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 1.5em 0;
	color: white;
	font-size: 15px;
	text-align: center;
}

footer a,
footer a:visited {
	color: rgb(200, 100, 50);
}

main a:hover,
main a:focus,
main a:active,
footer a:hover,
footer a:focus,
footer a:active,
main li a:hover,
main li a:focus,
main li a:active,
.grammar-tooltip a {
	color: rgb(161, 70, 10);
}

a:focus,
main li a:focus,
button:focus,
input:focus {
	outline-color:rgb(161, 70, 10);
}

main li > a {
	color: rgb(200, 100, 50);
}

abbr {
	font-style: italic;
	font-weight: bold;
	font-variant: none;
	text-decoration: underline dotted;
	text-decoration-skip-ink: none
}


/*texts*/
.black-text {
	color: black;
}

.white-text {
	color: white;
}

.darkorange-text {
	color: rgb(200, 100, 50);
}

.lightorange-text {
	color: #f7882f;
}

.peach-text {
	color: #ff9a69;
}

.red-text {
	color: #f52f22;
}

.lightred-text {
	color: #f54f47;
}

.green-text {
	color: lime;
}

.darkgreen-text {
	color: green;
}

.yellow-text {
	color: yellow;
}

.medyellow-text {
	color: rgb(255, 205, 23);
}

.darkyellow-text {
	color: #fac400;
}

.blue-text {
	color: cyan;
}

.darkblue-text {
	color: #00bfa9;
}

.navy-text {
	color: #002c5a;
}

.purple-text {
	color: purple;
}

.lightpurple-text {
	color: #c8a2c8;
}

.pink-text {
	color: lightpink;
}

/*backgrounds*/
.darkgrey-bg {
	background-color: #444;
}

.lightorange-bg {
	background-color: #fde5cd;
}

.red-bg {
	background-color: #ee1e1e;
}

.orange-bg {
	background-color: #f7882f;
}

.yellow-bg {
	background-color: rgb(255, 205, 23);
}

.green-bg {
	background-color: green;
}

.blue-bg {
	background-color: #00bfa9;
}

.purple-bg {
	background-color: purple;
}

.black-bg {
	background-color: black;
}

.darkblue-bg {
	background-color: #002c5a;
}

.dark-opacity {
	background-color: rgba(0, 0, 0, 0.85);
}

/* Generic Styles */

.strong {
	font-size: 18px;
	font-weight: bold;
}

.full-width {
	width:100%;
}

.big-text {
	font-size: 3em;
}

.medium-text {
	font-size: 2.5em;
}

.poetic-text {
	font-size: 2.5em;
}

.title-text {
	font-size: 1.7em;
}

.initial-letter {
	font-size: 1.2em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
}

.georgia {
	font-family: Georgia, "Times New Roman", Times, serif;
}

.inline-block {
	display: inline-block;
}

.no-text-decoration {
	text-decoration: none;
}

.text-decoration {
	text-decoration: underline;
}

.border-bottom {
	border-bottom: 2px solid;
}

.margin-bottom-ten {
	margin-bottom: 10px;
}

.margin-left {
	margin-left: 20px;
}

.float-right {
	float: right;
}

.float-left {
	float: left;
}

.padding-bottom {
	padding-bottom: 1em;
}

.padding-left {
	padding-left: 1em;
}

.padding-top {
	padding-top: 1em;
}

.large-padding-top {
	padding-top: 3em;
}

.padding-one-em {
	padding:1em;
}

.remove-margin {
	margin: 0;
}

.remove-padding {
	padding: 0;
}

/* Navigation */

nav {
	font-size: 18px;
	padding: 0.25em;
}

.navelement {
	display: inline-block;
}

.navelement > a,
.navelement > span {
	padding: 0.66em 1.2em;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	color: white;
}

.navelement > a:hover,
.navelement > span:hover,
.navelement > a:active,
.navelement > span:active,
.navelement > a:focus,
.navelement > span:focus {
	color: rgb(223, 115, 90);
}

.logo img {
	height: 35px;
}

.logo a,
.logo a:hover {
	text-decoration: none;
	color: white;
}

/* Cards on Homepage */

.card-row {
	margin: 0;
}

.first-card {
	padding-left:0px;
}

.card-wrapper {
	height: 100%;
	padding-right: 0;
	padding-top: 1em;
}

.card {
	padding-top: 30em;
	border-radius: 5px;
}

.card-content {
	border-radius: 0 0 5px 5px;
	padding: 0.5em 1.25em 1em 1.25em;
	background: rgba(68, 68, 68, 0.85);
	font-size: 1.1em;
	line-height: 1.5em;
	position: absolute;
	bottom: 0;
	color: white;
}

.card-title {
	font-weight: bold;
	padding-bottom: 0.25em;
}

.left-card-image {
	background-image: url(../images/card4.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.middle-card-image {
	background-image: url(../images/card1.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.right-card-image {
	background-image: url(../images/card6.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.card:hover {
	-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25),
		0 10px 10px rgba(0, 0, 0, 0.22);
	-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25),
		0 10px 10px rgba(0, 0, 0, 0.22);
	-ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25),
		0 10px 10px rgba(0, 0, 0, 0.22);
	-o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25),
		0 10px 10px rgba(0, 0, 0, 0.22);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

/* buttons */

.button {
	display: inline-block;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-radius: 5px;
	border-style: none;
}

.light-button {
	border: 1px solid rgb(200, 100, 50);
	background-color: #fbfbfb;
}

.light-button:hover,
.light-button:active {
	background-color: rgb(200, 100, 50);
	color: white;
}

.solid-button {
	background-color: rgb(200, 100, 50);
	color: white;
}

.solid-button:hover,
.solid-button:active {
	background-color: rgb(161, 70, 10);
	color: white;
}

/* Specific Components */

.caesura {
	padding-left:.75em;
}

/* Grammar Graphic Box */

.grammar-box {
	text-align: center;
	font-family: arial;
	padding: 0.5em 2em;
	display: inline-block;
	margin-bottom: 15px;
}

/* Hideable Grammar Tooltip */

.tooltip-header {
	background-color: rgb(200, 100, 50);
	text-align: left;
	color: white;
	border-radius: 5px;
	padding: 0 0.75em;
	width: 100%;
	border: none;
	margin-bottom: 0.5em;
}

.card-link,
.card-link:hover {
	background-color: rgb(200, 100, 50);
	text-align: left;
	color: white;
}

.card-body {
	padding: 0.25em 0.5em;
	font-size: 0.85em;
}

/* Audio Button */

.audio-button {
	border: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	font-weight: bold;
	padding: 0;
}

.audio-button i {
	padding-left: 0.25em;
}

.audio-button:hover {
	text-decoration: underline;
}

.fa-play-circle {
	color: black;
}

/* Phonetic pages*/

.phonetic-container {
	max-width: 100%;
	padding-top: 1em;
	padding-bottom: 0.5em;
}
.phonetic-name {
	padding: 0.5em 0.3em;
}

.phonetic-eg-word {
	transform: rotate(270deg);
	padding: 0.5em 0;
}

.phonetic-container small {
	padding: 0.25em;
	text-align: center;
}

#face {
	max-width: 40%;
	padding-top: 1em;
}

#vowel-chart {
	max-width: 50%;
	padding-top: 1em;
}

.audio-svg {
	cursor: pointer;
}

.red-border {
	border-bottom: 4px solid #ee1e1e;
}

.orange-border {
	border-bottom: 4px solid #f7882f;
}

.yellow-border {
	border-bottom: 4px solid #ffcd17;
}

.green-border {
	border-bottom: 4px solid green;
}

.blue-border {
	border-bottom: 4px solid #00bfa9;
}

.navy-border {
	border-bottom: 4px solid #002c5a;
}

.purple-border {
	border-bottom: 4px solid #800080;
}

.orange-fill /* This is for SVGs */
{
	fill:rgb(200, 100, 50);
	stroke:rgb(200, 100, 50);
}

/* Time Line */

/* The container for the whole timeline */
.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	margin-bottom: 100px;
}

/* timeline header box */
.timeline h2 {
	margin: 0;
	padding: 0.5em;
	background: #444;
	border-radius: 5px 5px 0 0;
	color: white;
	text-align: center;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
	content: "";
	position: absolute;
	width: 6px;
	background-color: #444;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -3px;
}

.timeline-container {
	padding: 10px 40px;
	position: relative;
	width: 50%;
	margin-bottom: -130px;
}

/* The circles on the timeline */
.timeline-container::after {
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	right: -13px;
	background-color: white;
	border: 4px solid #444;
	top: 15px;
	border-radius: 50%;
	z-index: 1;
}

/* makes the centre of the circle orange when the box is hovered */

.timeline-container:hover::after {
	background-color: #ff9f55;
}

/* Place the box on the left */
.timeline-left {
	left: 0;
}

.timeline-left:first-of-type {
	top: 0;
}
/* Place the box on the right */
.timeline-right {
	left: 50%;
}

/* Add arrows to the left container (pointing right) */
.timeline-left::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	right: 30px;
	border: medium solid #444;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #444;
}

/* Add arrows to the right container (pointing left) */
.timeline-right::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid #444;
	border-width: 10px 10px 10px 0;
	border-color: transparent #444 transparent transparent;
}

/* Fix the circle for containers on the right side */
.timeline-right::after {
	left: -13px;
}

/* The actual content */
.timeline-content {
	padding: 20px 30px;
	background-color: white;
	border: 1.5px solid #444;
	position: relative;
	border-radius: 0 0 5px 5px;
	transition: box-shadow 0.2s;
	font-size: 16px;
}

/*box shadow on hover*/
.timeline-container:hover > .timeline-header,
.timeline-container:hover > .timeline-content {
	-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25),
		0 10px 10px rgba(0, 0, 0, 0.22);
	-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25),
		0 10px 10px rgba(0, 0, 0, 0.22);
	-ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25),
		0 10px 10px rgba(0, 0, 0, 0.22);
	-o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25),
		0 10px 10px rgba(0, 0, 0, 0.22);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

/*timeline quote */
blockquote {
	border-left: 3px solid #ff9f55;
	padding: 0 0.5em;
	margin-bottom: 0;
	font-size: 16px;
	padding-left: 1em;
}

cite {
	display: block;
	color: #444;
	font-style: italic;
	text-align: right;
	padding-right: 1.5em;
}

/* main wrapper */
#mainwrapper {
	padding-top: 2em;
	padding-bottom: 6em;
}

#mainwrapper h1 {
	text-align: center;
}

/* Specific Styles for tables */

.grammar-table {
	border-radius: 5px;
	position: relative;
}

table {
	border-collapse: collapse;
	background: lightgrey;
	border-left: 1px solid darkgray;
}

.tabbed-table td,
.tabbed-table th {
	padding: 0.25em 0.5em;
}

.static-table td,
.static-table th {
	padding: 10px;
}

.five-px-padding {
	padding: 10px 5px !important;
}

table a {
	color: rgb(161, 70, 10);
}

.tabbed-table {
	border-right: 1px solid black;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
}

.static-table {
	border: 2px solid lightgrey;
}

.overflow-scroll {
	overflow: scroll;
}

table th {
	text-align: center;
}

.five-col-table th {
	text-align: center;
	width: 21%;
}

.four-col-table th {
	text-align: center;
	width: 24%;
}

.three-col-table th {
	text-align: center;
	width: 30%;
}

.double-col-td {
	border-right: 1px solid #DCDCDC;
}

/* Tabs styling */

.nav > li > a {
	padding: 5px 15px;
}

.nav > li.active > a,
.nav > li.active > a:hover {
	color: rgb(200, 100, 50);
	border-top: 1px solid black;
	border-bottom: none !important;
	border-right: 1px solid black;
	border-left: 1px solid black;
}

.nav-justified > li > a {
	color: black;
	border-top: 1px solid darkgray;
	border-bottom: 1px solid black;
	border-right: 1px solid darkgray;
	border-left: 1px solid darkgray;
}

.table-cell-filler {
	display: block;
	text-align: center;
	padding: 0 1.5em;
}

/*Overview Note */

.overview-note-content {
	width: 100%;
	padding: 0 1em 1em 1em;
	border: 1px rgb(161, 70, 10) solid;
}
.overview-table {
	width: 100%;
	border-bottom: 1px darkgrey solid;
}
.overview-table th {
	border: 1px darkgrey solid;
	padding: 0.25em 0.75em;
}
.overview-table td {
	border-left: 1px darkgrey solid;
	border-right: 1px darkgrey solid;
	text-align: left;
	padding: 0.5em;
}

.mobile-overview-table {
	width: 99%;
	border-bottom: 1px darkgrey solid;
}
.mobile-overview-table th {
	border: 1px darkgrey solid;
	padding: 0.25em;
}
.mobile-overview-table td {
	border-left: 1px darkgrey solid;
	border-right: 1px darkgrey solid;
	padding: 0.25em;
	text-align: left;
}

/*end of table stuff */

/* Quiz code for the language pages */

.answer {
	color: #444;
	font-size: 14px;
}

.table-error {
	border: 1px solid red;
	color: red;
}

.table-success {
	border: 1px solid green;
	color: green;
}

.has-success .answer:before {
	content: "Correct: ";
}

.has-error .answer:before {
	content: "Incorrect: ";
}

/*line styles*/
.border {
	height: 6px;
	background: url("../images/hr-11.png") repeat-x 0 0;
	border: 0;
}

.line {
	border-top: 3px double rgb(200, 100, 50);
	margin: 0;
	padding: 0;
	padding-bottom: 0.75em;
}

/*breadcrumb*/

.breadcrumb {
	padding: 0;
	margin-bottom: 0;
	font-size: 14px;
	background-color: transparent;
}

.bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
	content: none;
}
.bc-icons-2 .breadcrumb-item.active {
	color: rgb(200, 100, 50);
}

/* Module index*/

.course-index {
	padding: 0;
}

li.listtitle {
	list-style-type: none;
	color: rgb(200, 100, 50);
	font-size: 24px;
	font-weight: bold;
	text-decoration: underline;
}

li.inactive {
	color:#808080;
}

a > .listtitle:hover {
	color: rgb(161, 70, 10);
}

ul.module li {
	color: black;
	list-style-type: lower-roman;
	padding-top: 5px;
}

ul.module a {
	color: black;
}

.user-input {
	width: 95px; /*do not remove, I don't care what the linter says*/
	text-align: center;
	display: inline;
	border-width: 1px;
}


/* tweaks */
.fa-angle-double-down {
	padding-top: 0.3em;
}

/*Experimental Stuff */


.extra-padding-td td {
	padding: 0.5em 1.25em;
}

.static-button-position {
	margin-top: -25px;
    margin-left: 10px;
}

/* bug fix for demonstrative graphics */
.small-word-padding {
	padding:0px 4px;
}

/* bug fix for mobile padding */
.small-padding-top {
	padding-top:1em;
}

/* Styles for vocab modal */
.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
  }

.modal-dialog {
	position: fixed;
	margin: 0;
	width: 100%;
	height: 100%;
	padding: 0;
  }
  
  .modal-content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #f8f8f8;
	border-radius: 0;
	box-shadow: none;
  }
  
  .modal-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	padding: .75em .5em;
	background: rgb(0, 0, 0);
	border: 0;
  }
  
  .modal-title {
	color: #fff;
  }
  
  .modal-body {
	top: 60px;
	bottom: 60px;
	width: 100%;
	font-weight: 300;
	padding:2em 1em;
	overflow: auto;
  }

  .center-button {
	  margin:auto;
  }
  
  .modal-footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 15px;
	background: #ddd;
  }

.flashcard-row {
	display:flex;
	align-items: center;
	justify-content: center;
}

.flashcard {
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content: center;
    font-size:2em;
	margin:auto;
    text-align:center;
    border-radius:25px;
	height: 275px;
	width:40%;
	margin-bottom:.75em;
	border:1px solid rgb(247, 136, 47);
	background:white;
	transition: all 0.5s ease;
    transform-style: preserve-3d;
}

.flashcard h2 {
	font-size:40px;
}

.flashcard-answer {
	border-radius:5px;
	height:40px;
}

.modal-dialog button {
	font-size:1em;
}

.incorrect-flashcard h2,
.correct-flashcard h2,
.incorrect-flashcard h3,
.correct-flashcard h3 {
	transform: rotateX(180deg);
}

.correct-flashcard {
	transform: rotateX(-180deg);
	background:lightgreen;
	border:1px solid green;

}

.incorrect-flashcard {
	transform: rotateX(-180deg);
	background:lightcoral;
	border:1px solid red;
}

.translation-button,
.special-character {
	background:white;
}


/* Responsive Styles */

/* Small laptop screen */
@media screen and (min-width: 450px) and (max-width: 1400px) {

	#textselect {
		grid-template-columns: repeat(2, 1fr);
	}

	.modal-title {
		font-size:30px;
	}

	.modal-body {
		top:45px;
	}

	.flashcard {
		height:225px;
		margin-bottom:.45em;
	}

	.modal-dialog button {
		font-size:.8em;
	}

	.big-text {
		font-size: 4rem;
	}

	.poetic-text {
		font-size:2em;
	}

	.small-padding-top {
		padding-top: .75em;
	}

	.modal-footer {
		padding:10px 15px;
	}
}

/* mobile */
@media screen and (max-width: 440px) {
	#textselect {
		grid-template-columns: repeat(1, 1fr);
	}
	
	.no-container-padding {
		padding-right: 0;
		padding-left: 0;
	}

	.container {
		padding-left:0;
		padding-right:0;
	}

	header h1 {
		font-size: 1.5rem;
		margin-left: 0;
		text-shadow: -1px 0 0 #000000, 1px 0 0 #000000, 0 1px 0 #000000,
			0 -1px 0 #000000;
	}

	nav {
		text-align: center;
	}

	.navelement a {
		padding: 0.66em;
	}

	#mainwrapper {
		margin: 1em;
		padding-top: 0;
	}

	.index-mainwrapper {
		margin:0em !important;
	}

	.big-text {
		font-size: 2rem;
	}

	.medium-text {
		font-size: 1.5em;
	}

	.poetic-text {
		font-size:.75em;
	}

	.margin-left {
		margin-left:0;
	}

	.grammar-table {
		font-size: 1.2rem;
	}

	abbr[title]:focus::after {
		content: " ("attr(title)") ";
	}

	.table-scroll-container {
		overflow-x: scroll;
	}
	.two-tabs li {
		display: inline-block;
		width: 49%;
	}

	.four-tabs li {
		display: inline-block;
		width: 24%;
	}

	.five-tabs li {
		display: inline-block;
		width: 19%;
		overflow: hidden;
	}

	.three-tabs li {
		display: inline-block;
		width: 32.7%;
	}

	.nav-justified > li > a {
		margin-bottom: 0;
		padding: 5px 5px;
	}

	.tooltip-header {
		margin-top: 0.5em;
	}

	.left-card {
		padding-left: 15px;
	}

	.right-card {
		padding-right: 15px;
	}

	.card img {
		height: 100%;
	}

	.card-wrapper {
		padding: 0.75em 0;
	}

	.card-content {
		padding: 0.5em 1em;
		font-size: 1em;
		bottom: 10px;
	}

	#face {
		max-width: 100%;
	}

	.float-right-responsive {
		float: none;
	}

	.static-button-position {
		margin-top: 0px;
		margin-left: 0px;
	}

	.mobile-full-width {
		width:100%;
	}

	.static-table th {
		padding:5px;
	}

	/*responsive timeline styles*/

	/* Place the timeline to the left */
	.timeline::after {
		left: 15px;
	}

	/* mobile-full-width containers */
	.timeline-container {
		width: 100%;
		padding: 0;
		padding-left: 40px;
		margin-bottom: 0;
		padding-top: 15px;
	}

	/* Reduce padding inside the box*/
	.timeline-content {
		padding: 1em 1.5em;
	}

	/* Make sure that all arrows are pointing leftwards */
	.timeline-container::before {
		left: 30px;
		border: medium solid white;
		border-width: 10px 10px 10px 0;
		border-color: transparent #444 transparent transparent;
	}

	/* Make sure all circles are at the same spot */
	.timeline-left::after,
	.timeline-right::after {
		left: 2px;
	}

	/* Make all right containers behave like the left ones */
	.timeline-right {
		left: 0%;
	}

	/* Make the flashcard smaller on mobile and the input bigger */
	.flashcard {
		height: 150px;
		width:100%;
		margin-bottom:.25em;
	}

	.flashcard h2 {
		font-size:30px;
		margin-top:0;
	}

	.flashcard h3 {
		font-size:20px;
	}

	.flashcard-answer {
		height:45px;
		width:90%;
	}

	.flashcard-row .special-character {
		padding: .5em 1em;
		margin: .25em .5em 0 .5em;	
		font-size:.9em;
	}

	.flashcard-check,
	.try-another,
	.close-button {
		padding:.5em 1em;
		font-size:1em;
	}

	.modal-title {
		font-size:24px;
	}

	.explanatory-text {
		font-size:.85em;
	}

	.modal-header {
		padding:.5em;
	}

	.modal-body {
		top:30px;
	}

	.modal-dialog button {
		font-size:.85em;
	}

	.modal-footer {
		padding:5px;
	}

	.small-padding-top {
		padding-top:10px;
	}

	#vowel-chart {
		max-width: 100%;
		padding-top: 1em;
	}
}