@charset "UTF-8";
/*==================================== 
   Anki Template v1.2.2 / https://github.com/bikenik/Anki_Templates/tree/bikeNik-feature-branch/Templates/Murphy_(elementary)
=====================================*/

/*==================================== 
Copyright (c) 2017 by bikeNik (https://github.com/bikenik)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
=====================================*/

/*==================================== 

!!! A LITTLE SETTINGS FOR DIFFERENT WAYS TO DISPLAY THE "FONT LINE-HEIGHT OF BUTTON"

CHANGE FOR ANKI 2.0*
paste this code to the end of this section: 


.win #overlay_title #p_button,
.mac #overlay_title #p_button {
  line-height: 120%; 
}

.mac .overlay .p_app_button,
.win .overlay .p_app_button {
   line-height: 180%; 
}

.win .material-icons,
.mac .material-icons {
    line-height: 168%;
}
.win .appendixes,
.mac .appendixes {
 margin-top: -340px;
}
=====================================*/

::-webkit-scrollbar {
	display: none;
}

.card, .header {
	position: relative;
	margin: 0px auto;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
}

/*==========================================================================
// Normalize.css Reset
// ==========================================================================*/

html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}

audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden], template {
	display: none;
}

a {
	background: transparent;
}

a:active, a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b, strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code, kbd, pre, samp {
	font-family: monospace, monospace;
	font-size: 1em;
	display: inline-table !important;
}

button, input, optgroup, select, textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button, select {
	text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled], html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

* input[type="checkbox"], input[type="radio"] {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td, th {
	padding: 0;
}

/*==================================== 
  More reset
=====================================*/

::-webkit-scrollbar {
	display: none;
}

ul {
	-webkit-margin-after: 0;
	-webkit-padding-start: 0;
}

ul, ol {
	list-style: none;
}

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

html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body h1, body h2, body h3, body p, body * {
	-webkit-font-smoothing: antialiased !important;
}

html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, dfn, del, p, blockquote, fieldset, input, textarea, select, article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, button, canvas {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, th, dfn, del {
	font-weight: normal;
	font-style: normal;
}

caption, th {
	text-align: left;
}

textarea {
	resize: none;
}

a>img {
	vertical-align: bottom;
}

em, i {
	font-style: italic;
}

del {
	text-decoration: line-through;
}

:focus {
	outline: none;
}

p {
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
}

/*==================================== 
   Simple Grid
=====================================*/

/*
  Simple Grid
  Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/
  Project Page - http://thisisdallas.github.com/Simple-Grid/
  Author - Dallas Bass
  Site - dallasbass.com
*/

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

[class*='col-'] {
	float: left;
	padding-left: 0.188em;
	padding-right: 0.188em;
	/* column-space */
}

.grid {
	width: 100%;
	height: 100%;
	max-width: 100%;
	min-width: 300px;
	margin: 0 auto;
	overflow: auto;
}

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

.grid-pad {
	padding-top: 10px;
	padding-left: 0px;
	/* grid-space to left */
	padding-right: 0px;
	/* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
	padding-bottom: 25%;
}

.push-right {
	float: right;
}

/* Content Columns */

.col-1-1 {
	width: 100%;
}

.col-2-3, .col-8-12 {
	width: 66.66%;
}

.col-1-2, .col-6-12 {
	width: 50%;
}

.col-1-3, .col-4-12 {
	width: 33.33%;
}

.col-1-4, .col-3-12 {
	width: 25%;
}

.col-1-5 {
	width: 20%;
}

.col-1-6, .col-2-12 {
	width: 16.667%;
}

.col-1-7 {
	width: 14.28%;
}

.col-1-8 {
	width: 12.5%;
}

.col-1-9 {
	width: 11.1%;
}

.col-1-10 {
	width: 10%;
}

.col-1-11 {
	width: 9.09%;
}

.col-1-12 {
	width: 8.33%;
}

/* Layout Columns */

.col-11-12 {
	width: 91.66%;
}

.col-10-12 {
	width: 83.333%;
}

.col-9-12 {
	width: 75%;
}

.col-5-12 {
	width: 41.66%;
}

.col-7-12 {
	width: 58.33%;
}

/* Pushing blocks */

.push-2-3, .push-8-12 {
	margin-left: 66.66%;
}

.push-1-2, .push-6-12 {
	margin-left: 50%;
}

.push-1-3, .push-4-12 {
	margin-left: 33.33%;
}

.push-1-4, .push-3-12 {
	margin-left: 25%;
}

.push-1-5 {
	margin-left: 20%;
}

.push-1-6, .push-2-12 {
	margin-left: 16.667%;
}

.push-1-7 {
	margin-left: 14.28%;
}

.push-1-8 {
	margin-left: 12.5%;
}

.push-1-9 {
	margin-left: 11.1%;
}

.push-1-10 {
	margin-left: 10%;
}

.push-1-11 {
	margin-left: 9.09%;
}

.push-1-12 {
	margin-left: 8.33%;
}

/*--------------------- end _simplegrid.css ---------------*/

/*==================================== 
   Basic card options
=====================================*/

html {
	height: 100%;
	width: 100%;
}

/* --------------------- Additional option for Additional Card Fields plugin------------------------------ */

.G {
	color: gray;
}

.q0 {
	color: indigo;
}

.q1 {
	color: black;
}

.q2 {
	color: darkgreen;
}

/* --------------- Center content vertically on page ---------------------- */

body {
	z-index: 100;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f1ffef), to(#ffffff));
	background-image: linear-gradient(to bottom, #f1ffef 0%, #ffffff 100%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 0;
	line-height: 1.5;
	height: 100%;
	margin: 0;
	font-smoothing: subpixel-antialiased !important;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.card_1 {
	z-index: 100;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.card {
	width: 100%;
	max-width: 1440px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.hr_style {
	margin-bottom: 0%;
}

hr {
	height: 2px;
	border: 0;
	background: -webkit-gradient(linear, right top, left top, color-stop(1%, #ffffff), color-stop(50%, #00803f), to(#ffffff));
	background: linear-gradient(to left, #ffffff 1%, #00803f 50%, #ffffff 100%);
}

.normalize {
	margin: 0 auto;
}

a {
	color: #5883c9;
	text-decoration: underline;
	cursor: auto;
}

a:hover {
	color: #00803F;
}

blockquote {
	font: 14px/22px normal helvetica, sans-serif;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 50px;
	padding-left: 15px;
	border-left: 0.2em solid #00803F;
}

li {
	padding-left: 1em;
	text-indent: -.7em;
}

li::before {
	font-size: 2.5em;
	content: "∘ ";
	color: #00803F;
}

@media (max-width: 1025px) {
	.add-space-for-mobile {
		height: 360px;
	}
}

@media (max-width: 769px) {
	.add-space-for-mobile {
		height: 270px;
	}
}

@media (max-width: 569px) {
	.add-space-for-mobile {
		height: 165px;
	}
}

@media (max-width: 321px) {
	.add-space-for-mobile {
		height: 220px;
	}
}

.highlight {
	margin-left: -9%;
	width: intrinsic;
	padding: 0 10px;
	background-color: #e5f3e8;
}

.unit_table {
	position: relative;
	margin: 0px auto;
}

/*==================================== 
  Card Main
=====================================*/

.main_table {
	position: relative;
	margin: 1em auto 0 auto;
	text-align: center;
	display: block;
	width: 70%;
	max-width: 910px;
	color: #00803F;
	height: auto;
	padding: .5em 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: #00803F;
	border: solid 0px;
	border-radius: 0.25em;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 14px rgba(0, 0, 0, 0.22);
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.22);
	-webkit-transition-delay: 120ms;
	transition-delay: 120ms;
	-webkit-transition-duration: 300ms;
	transition-duration: 300ms;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

@media (max-width: 737px) {
	.main_table {
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		margin: 0 auto;
		width: 80%;
	}
}

@media (max-width: 438px) {
	.main_table {
		margin: 0 auto;
		padding: .2em 0;
		width: 100%;
		border-radius: 0;
	}
}

.main_table.active {
	margin: 0 auto;
	border-radius: 0 0 4px 4px;
	-webkit-transition-delay: 0ms;
	transition-delay: 0ms;
	-webkit-transition-duration: 100ms;
	transition-duration: 100ms;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}

.main_table_back {
	border-top-left-radius: 0.25em;
	border-top-right-radius: 0.25em;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	margin: 1em auto 0;
}

@media (max-width: 438px) {
	.main_table_back {
		width: 100%;
		border-radius: 0;
		margin: 0 auto;
	}
}

/*--------------- exercises ---------------------- */

.exercises {
	margin-bottom: -.5em;
	padding: 0 .5em;
	color: #FAF4E5;
}

@media (max-width: 668px) {
	.exercises {
		margin-bottom: -1em;
	}
}

@media (max-width: 321px) {
	.exercises {
		padding: 0 .2em;
	}
}

.unit_table, .th_1, .td_1 {
	border: 0px solid #000;
	border-collapse: collapse;
	border-radius: 0;
	text-align: center;
}

/* ------------------------------------ question---------------------------------- */

.question {
	display: inline-block;
	z-index: 100;
	background: #e5f3e8;
	width: 98%;
	padding: .3em;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 0.15em;
	border: 1px outset rgba(158, 129, 115, 0.3);
	-webkit-box-shadow: inset 0 0 45px rgba(255, 255, 255, 0.3), 0 12px 20px -10px rgba(0, 0, 0, 0.4);
	box-shadow: inset 0 0 45px rgba(255, 255, 255, 0.3), 0 12px 20px -10px rgba(0, 0, 0, 0.4);
	-webkit-perspective: 800px;
	perspective: 800px;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

@media (max-width: 438px) {
	.question {
		width: 100%;
		border-radius: 0;
	}
}

.question:active {
	-webkit-box-shadow: 0 1px 4px #321722, 0 0 40px rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 4px #321722, 0 0 40px rgba(0, 0, 0, 0.1);
}

.question>div>span {
	color: #00803F;
}

/*--------------- Add words ---------------------- */

.add_words1, .add_words2 {
	display: inline-block;
	position: relative;
	margin: .7em auto .6em;
	padding: 0 5px;
	border: solid #077a09 1px;
	border-radius: .2em;
	background: white;
	width: 95%;
}

#choices {
	display: block;
	margin: 0 auto .4em;
	margin-top: 1em;
}

.choices ul {
	padding: 0;
	margin: 0;
}

.choices_words li {
	display: inline-block;
	border-radius: .2em;
	padding: .1em .2em;
	border-style: solid;
	background: white;
	border-width: 1px;
	margin: 2px;
	margin-top: .2em;
	text-indent: 0;
}

.choices_words li::before {
	content: none;
}

.choices-box-delimiter {
	height: .3em;
	margin: 0px;
}

.choices_words ul:nth-child(3) li {
	background: #a6dd9e;
}

.table_answer {
	display: block;
	background-color: white;
	width: 70%;
	max-width: 910px;
	height: -webkit-min-content;
	height: -moz-min-content;
	height: min-content;
	margin: 10px auto 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 14px rgba(0, 0, 0, 0.12);
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.12);
	font-weight: 100;
	font-size: 1.3em;
	line-height: 120%;
	text-align: center;
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* lets it scroll lazy */
}

@media (max-width: 737px) {
	.table_answer {
		width: 80%;
	}
}

@media (max-width: 438px) {
	.table_answer {
		width: 100%;
	}
}

.td_back {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* lets it scroll lazy */
	padding: .5em;
	padding-bottom: 5px;
	margin: 0 auto;
	white-space: nowrap;
}

/*--------------- Audio Buttons ---------------------- */

.replaybutton {
	display: block;
	vertical-align: middle;
}

.replaybutton span svg {
	display: block;
	stroke: none;
	fill: #e5f3e8;
	background: #077a09;
	display: inline;
	height: 3em;
	width: 3em;
	min-width: 12px;
	min-height: 12px;
	border-radius: 50%;
	-webkit-box-shadow: 0 1px 14px rgba(0, 0, 0, 0.44);
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.44);
}

.sound_main {
	z-index: 0;
	position: fixed;
}

.sound_front {
	z-index: 200;
	display: block;
	position: relative;
	margin-left: 30px;
	float: left;
	top: 20px;
}

@media (max-width: 769px) {
	.sound_front {
		margin-left: 20px;
	}
}

@media (max-width: 668px) {
	.sound_front {
		margin-left: 5px;
	}
}

#question-audio {
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	margin-top: .5em;
	background: #4e4e4e;
}

#question-audio>.replaybutton span svg {
	display: inline-block;
	position: relative;
	padding: 0;
	background: #4e4e4e;
	-webkit-box-shadow: none;
	box-shadow: none;
	margin-top: 5px;
	margin-bottom: -7px;
}

.question>div>.replaybutton {
	display: inline;
}

.question>div>.replaybutton span svg {
	position: relative;
	display: block;
	height: 1.5em;
	width: 1.5em;
}

.iphone .question>div img, .ipad .question>div img, .mobile .question>div img {
	max-width: 65px !important;
	min-width: 65px !important;
	margin-bottom: 9px;
}

.question>div>div>.replaybutton {
	display: inline;
}

.question>div>div>.replaybutton span svg {
	position: relative;
	display: block;
	height: 1.5em;
	width: 1.5em;
}

.iphone .question>div>div img, .ipad .question>div>div img, .mobile .question>div>div img {
	max-width: 65px !important;
	min-width: 65px !important;
	margin-bottom: 9px;
}

.answer_audio {
	float: left;
}

#question-audio>.replaybutton {
	width: 100%;
	margin-left: 0;
	border-bottom: solid 0.1em #00803F;
}

.iphone #question-audio img, .ipad #question-audio img, .mobile #question-audio img {
	max-width: 128px !important;
	min-width: 128px !important;
	padding: 7px;
}

@media (max-width: 769px) {
	.iphone #question-audio img, .ipad #question-audio img, .mobile #question-audio img {
		max-width: 90px !important;
		min-width: 90px !important;
	}
}

@media (max-width: 569px) {
	.iphone #question-audio img, .ipad #question-audio img, .mobile #question-audio img {
		max-width: 65px !important;
		min-width: 65px !important;
	}
}

.ipad .sound_front {
	margin-left: 5px;
}

.question_answer {
	z-index: 0;
	position: absolute;
	top: 15px;
	margin-left: 20px;
	color: #000;
}

@media (max-width: 569px) {
	.question_answer {
		max-width: 20px;
		top: 0;
	}
}

@media (max-width: 438px) {
	.question_answer {
		margin-left: 5px;
	}
}

.iphone .sound_front img, .ipad .sound_front img, .mobile .sound_front img {
	background: #4e4e4e;
	max-width: 128px !important;
	min-width: 128px !important;
}

@media (max-width: 769px) {
	.iphone .sound_front img, .ipad .sound_front img, .mobile .sound_front img {
		max-width: 90px !important;
		min-width: 90px !important;
	}
}

@media (max-width: 569px) {
	.iphone .sound_front img, .ipad .sound_front img, .mobile .sound_front img {
		max-width: 50px !important;
		min-width: 50px !important;
	}
}

.iphone .question_answer img, .ipad .question_answer img, .mobile .question_answer img {
	max-width: 128px !important;
	min-width: 128px !important;
}

@media (max-width: 769px) {
	.iphone .question_answer img, .ipad .question_answer img, .mobile .question_answer img {
		max-width: 90px !important;
		min-width: 90px !important;
	}
}

@media (max-width: 569px) {
	.iphone .question_answer img, .ipad .question_answer img, .mobile .question_answer img {
		max-width: 50px !important;
		min-width: 50px !important;
	}
}

.iphone .question_answer, .mobile .question_answer {
	top: 15px;
}

/*==================================== 
   Header
=====================================*/

.background_header {
	background: white;
}

.unit_table {
	display: block;
	margin-top: 0px;
	max-height: 0;
	max-width: 910px;
	opacity: 0;
	-webkit-transition-delay: 0ms;
	transition-delay: 0ms;
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
	width: 70%;
	z-index: 0;
}

@media (max-width: 737px) {
	.unit_table {
		width: 80%;
	}
}

@media (max-width: 438px) {
	.unit_table {
		width: 90%;
	}
}

.unit_table.active {
	max-height: 300px;
	opacity: 1;
	-webkit-transition-delay: 200ms;
	transition-delay: 200ms;
	-webkit-transition-duration: 300ms;
	transition-duration: 300ms;
}

@media (max-width: 438px) {
	.unit_table.active {
		width: 90%;
	}
}

.un_table {
	width: 100%;
}

.th_1 {
	width: 10%;
	background: #077a09;
	color: #FAF4E5;
	font-size: 2em;
	padding-left: 10px;
	padding-right: 10px;
}

.th_2 {
	background: #a6dd9e;
	width: 90%;
	border: 0px solid #000;
	border-radius: 0;
	border-collapse: collapse;
}

.header {
	background-color: #4e4e4e;
	/*rgba(0, 0, 0, .65);*/
	display: block;
	display: block;
	max-height: 0;
	max-width: 910px;
	overflow: hidden;
	position: relative;
	-webkit-transition-delay: 0ms;
	transition-delay: 0ms;
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
	width: 70.5%;
	z-index: 13;
}

@media (max-width: 737px) {
	.header {
		width: 80%;
	}
}

@media (max-width: 438px) {
	.header {
		width: 90%;
	}
}

.header.active_1 {
	max-height: 500px;
	width: 70%;
	-webkit-transition-delay: 200ms;
	transition-delay: 200ms;
	-webkit-transition-duration: 300ms;
	transition-duration: 300ms;
}

@media (max-width: 737px) {
	.header.active_1 {
		width: 80%;
	}
}

@media (max-width: 438px) {
	.header.active_1 {
		width: 90%;
	}
}

.header.active_2 {
	max-height: 500px;
	width: 100%;
	max-width: 100%;
}

/*==================================== 
							Tables
	=====================================*/

.content {
	text-align: center;
	background-color: #fff;
	border: thin solid #1dd16e;
	border-left: none;
	border-right: none;
}

.content_3 {
	margin-top: 5px;
	padding-top: 0px;
	padding-left: 15px;
	border: none;
	background-color: #e5f3e8;
	text-align: left;
}

.content_4 {
	padding-left: 5%;
	margin-left: auto;
	text-align: left;
	color: #3b3b3b;
}

.p_1 {
	width: 80%;
	background: #077a09;
	border-radius: 6px;
	color: #FAF4E5;
	margin-left: 7%;
	text-align: left;
	font-size: 1.3em;
	padding-left: 7%;
	padding-right: 3%;
	padding-top: .5em;
	padding-bottom: 1%;
}

.p_2 {
	width: 80%;
	margin: 10px auto;
}

.appendix {
	display: block;
	width: 80%;
	background-color: #efe3dd;
	border-collapse: collapse;
	position: absolute;
	border-radius: 10px;
}

.appendix:focus {
	margin-left: 20%;
}

.app_table {
	display: block;
	position: relative;
	background-color: #e5f3e8;
	/*   background-color: #efe3dd;*/
	width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
	color: #3b3b3b;
}

.tab-4 {
	margin: 2% 3%;
	width: 95%;
	border-collapse: collapse;
	background-color: #e5f3e8;
}

.t-4 {
	padding-left: 10px;
	width: intrinsic;
	border: 1px solid #fff;
}

.t-4-1 {
	border: 2px solid transparent;
	line-height: 1.2;
}

.tab-5 {
	margin: 2% 3%;
	width: 95%;
	text-align: left;
	border-collapse: collapse;
	background-color: #e5f3e8;
}

.th-5 {
	color: #3b3b3b;
	font-weight: 100;
	text-align: left;
	border: 1px solid #fff;
}

.t-5 {
	width: auto;
	padding-left: 8px;
	border: 1px solid #fff;
}

.tab-m-5 {
	margin-top: -1.5%;
}

.tr-5 {
	border-bottom: 2px solid #fff;
}

.p-5 {
	margin: 15px auto;
	width: 100%;
	position: relative;
	background-color: transparent;
	text-align: left;
	padding-left: 3%;
}

.p-7 {
	font-size: 1em;
	line-height: 1.7em;
	position: relative;
	width: 100%;
	padding-left: 8%;
	padding-right: 2%;
}

table.header_tb {
	width: 100%;
	background: #fff;
	border: none;
}

td.header_left {
	border: none;
	text-align: center;
	width: 35%;
}

td.header_right {
	border: none;
	text-align: center;
}

th, td {
	width: 35%;
	text-align: left;
	vertical-align: top;
	padding: 5px;
	border: 1px solid #1dd16e;
}

td.coloumn {
	width: 5%;
	text-align: left;
	font-style: italic;
	vertical-align: middle;
	padding-left: 1.5em;
	font-size: 1em;
}

td.coloumn_2 {
	width: 13%;
	border: none;
}

.coloumn_2_1_2 {
	font-weight: bold;
}

.coloumn_2_2_1 {
	width: 10%;
	border-collapse: collapse;
	border-left: thin;
	border-bottom: none;
	border-top: none;
}

strong {
	font-weight: bold;
}

.highlight {
	margin-left: -9%;
	width: intrinsic;
	padding: 0 10px;
	background-color: #a6dd9e;
}

.th_main {
	border-radius: 5px;
	width: 0%;
	background-color: #e5f3e8;
	color: #00803F;
}

.heading {
	position: relative;
	margin-top: 1.3em;
	padding: 3px;
	border-radius: 3px;
	border: none;
	width: 100%;
	font-size: 1.5em;
	text-align: center;
	background-color: #e5f3e8;
	color: #3b3b3b;
}

.title {
	border: none;
	width: 100%;
	font-size: 1.5em;
	text-align: center;
	background: none;
	color: #FAF4E5;
}

.numbers {
	margin-left: -30px;
	padding: 5px;
	background-color: #e5f3e8;
	border-radius: 50%;
	color: #00803F;
}

/*–––––––––––––––––––––––––––*/

.tab_app_3 {
	display: inline-block;
	margin-top: -2%;
	margin-bottom: 15px;
	padding: 3%;
	vertical-align: top;
	background-color: #fff;
	border: 1px solid #1dd16e;
	text-align: center;
	color: #3b3b3b;
}

.t-a-3-1 {
	width: 40%;
	margin-left: 10px;
}

.t-a-3-2 {
	margin-top: -20px;
}

.t-a-3-3 {
	display: inline-block;
	padding: 3%;
	width: intrinsic;
	margin-left: 4%;
}

.tab_app_4 {
	float: left;
	margin: 1% 3% 1% 3%;
	padding: 2%;
	display: block;
	background-color: #e5f3e8;
	width: intrinsic;
}

.empty {
	text-align: center;
	background: none;
	border: none;
	font-weight: 500;
}

.irregular_1 {
	width: 45%;
	display: inline-block;
}

.irregular_2 {
	float: right;
	width: 45%;
	display: inline-block;
}

.footnote {
	padding-left: 10%;
	margin: 0 auto;
	width: 99.4%;
	background-color: #e5f3e8;
}

b {
	color: #000;
	font-weight: bold;
}

.red {
	color: #1dd16e;
}

/*==================================== 
  Footer
=====================================*/

footer#front {
	margin-top: .2em;
	height: auto;
}

footer#back {
	margin-top: 5%;
	height: auto;
}

.deck {
	position: relative;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	color: #c7c7c7;
	padding-top: 7px;
	bottom: 4px;
	text-align: center;
}

/* ==========================================================================
// Input Typeans
// ========================================================================== */

input {
	max-width: 100%;
	max-height: 1.5em;
	border: none;
	border-bottom: 0.1rem solid #077a09;
	-webkit-transition: width .5s;
	transition: width .5s;
	background: transparent;
	outline: 0;
}

#typeans {
	display: inline-block;
	min-width: 5%;
	max-width: 99.99% !important;
	margin: -.25em auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.win .question>div>span>span {
	margin-top: -5px;
}

/*--------------- input focus---------------------- */

#typeans:focus, #typeans1:focus, #typeans2:focus, #typeans3:focus, #typeans4:focus, #typeans5:focus, #typeans6:focus, #typeans7:focus, #typeans8:focus, #typeans9:focus, #typeans10:focus, #typeans11:focus, #typeans12:focus, #typeans13:focus, #typeans14:focus, #typeans15:focus, #typeans16:focus, #typeans17:focus, #typeans18:focus, #typeans19:focus, #typeans20:focus, #typeans21:focus {
	border-color: #00803F;
	outline: 0;
	border-radius: .15em;
	-webkit-box-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
	border-bottom: 0.2rem solid #077a09;
}

input#typeans {
	background: transparent;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	vertical-align: text-top;
}

.win input#typeans {
	margin-top: 0;
}

.iphone span[title]:before, .mobile span[title]:before {
	content: '✎';
}

.leftContainer, .rightContainer {
	background-color: transparent;
	border-radius: 50%;
	height: 35px;
	width: 20px;
}

@media (max-width: 769px) {
	.leftContainer, .rightContainer {
		background-color: transparent;
	}
}

/*==================================== 
  Typography
=====================================*/

@font-face {
	font-family: "ZiptyDoStd";
	src: url("_ZiptyDoStd.ttf");
}

@font-face {
	font-family: "TektonPro-Regular";
	src: url("_TektonPro-Regular.ttf");
}

@font-face {
	font-family: "CronosPro-Semibold";
	src: url("_CronosPro-Semibold.ttf");
}

@font-face {
	font-family: "CronosPro-Regular";
	src: url("_CronosPro-Regular.ttf");
}

@font-face {
	font-family: "CronosPro-LtIt";
	src: url("_CronosPro-LtIt.ttf");
}

@font-face {
	font-family: "CronosPro-Lt";
	src: url("_CronosPro-Lt.ttf");
}

@font-face {
	font-family: "CronosPro-Bold";
	src: url("_CronosPro-Bold.ttf");
}

.card {
	font-size: 1.125rem;
}

@media (max-width: 1025px) {
	.card {
		font-size: .925em;
	}
}

@media (max-width: 769px) {
	.card {
		font-size: .925em;
	}
}

@media (max-width: 668px) {
	.card {
		font-size: .825em;
	}
}

.exercises {
	font-family: "CronosPro-Regular";
	font-size: 2em;
	line-height: 1em;
}

.mac .exercises, .win .exercises {
	font-family: "Cronos Pro";
}

.win .exercises {
	font-size: 2.5em;
}

.question {
	font-family: "TektonPro-Regular";
	font-weight: 100;
	word-spacing: 0px;
	font-size: 2em;
	line-height: 1.3em;
	color: #3b3b3b;
	text-align: left;
}

@media (max-width: 668px) {
	.question {
		line-height: 1em;
	}
}

.win .question, .mac .question {
	font-family: "Tekton Pro";
}

.win .question {
	font-family: "Tekton Pro";
	word-spacing: 0px;
	font-size: 2em;
}

/*--------------- field "Example" ---------------------- */

.img_example {
	font-family: tahoma;
	font-size: 1.5em;
	text-align: left;
	padding: 0;
}

/* ------------------------------- Add words Fonts---------------------------------- */

.add_words1, .add_words2 {
	font-size: 1.2em;
	text-align: left;
	color: black;
}

.choices_words {
	font-family: "CronosPro-Regular";
	font-size: 1.2em;
	text-align: center;
}

.win .choices_words, .mac .choices_words {
	font-family: "Cronos Pro";
	font-style: normal;
}

.choices_words li {
	font-size: 1.1em;
}

.win .choices_words li, .win .choices_words {
	font-size: 1.3em;
}

/* ------------------------------- Header Fonts---------------------------------- */

.unit_table, .th_1, .td_1 {
	font-family: "CronosPro-Regular";
	font-size: 1.5em;
	line-height: 1em;
}

.win .unit_table, .win .th_1, .win .td_1, .mac .unit_table, .mac .th_1, .mac .td_1 {
	font-family: "Cronos Pro";
	font-weight: 500;
	font-style: bold;
}

.th_2 {
	color: #3b3b3b;
	font-family: #3b3b3b;
	font-weight: 800;
}

.win .th_2 {
	font-family: "CronosPro-Semibold";
}

.win .th_1 {
	letter-spacing: 2px;
}

.add_words {
	font-family: Helvetica;
}

#typeans, #typeans1, #typeans2, #typeans3, #typeans4, #typeans5, #typeans6, #typeans7, #typeans8, #typeans9, #typeans10, #typeans11, #typeans12, #typeans13, #typeans14, #typeans15, #typeans16, #typeans17, #typeans18, #typeans19, #typeans20, #typeans21 {
	font-family: "TektonPro-Regular" !important;
	font-style: normal;
}

.win #typeans, .mac #typeans, .win #typeans1, .mac #typeans1, .win #typeans2, .mac #typeans2, .win #typeans3, .mac #typeans3, .win #typeans4, .mac #typeans4, .win #typeans5, .mac #typeans5, .win #typeans6, .mac #typeans6, .win #typeans7, .mac #typeans7, .win #typeans7, .mac #typeans8, .win #typeans9, .mac #typeans9, .win #typeans10, .mac #typeans10, .win #typeans11, .mac #typeans11, .win #typeans12, .mac #typeans12, .win #typeans13, .mac #typeans13, .win #typeans14, .mac #typeans14, .win #typeans15, .mac #typeans15, .win #typeans16, .mac #typeans16, .win #typeans17, .mac #typeans17, .win #typeans18, .mac #typeans18, .win #typeans19, .mac #typeans19, .win #typeans20, .mac #typeans20, .win #typeans21, .mac #typeans21 {
	font-family: "Tekton Pro" !important;
	font-style: normal;
	color: #00803F;
}

/* ------------------------------- type Fonts---------------------------------- */

#typeans {
	font-family: "CronosPro-LtIt" !important;
	font-style: normal;
}

.win #typeans, .mac #typeans {
	font-family: "Cronos Pro" !important;
}

.cloze {
	font-family: "TektonPro-Regular";
}

.win .cloze, .mac .cloze {
	font-family: "Tekton Pro";
	font-style: italic;
	color: #00803F;
}

code#typeans {
	font-family: "TektonPro-Regular" !important;
	font-size: 1.5em;
}

@media (max-width: 1025px) {
	code#typeans {
		font-size: 1em;
	}
}

@media (max-width: 769px) {
	code#typeans {
		font-size: .875em;
	}
}

@media (max-width: 321px) {
	code#typeans {
		font-size: .575em;
	}
}

.win code#typeans, .mac code#typeans {
	font-family: "Tekton Pro" !important;
	font-size: 1.5em;
	letter-spacing: .02em;
}

@media (max-width: 1025px) {
	.win code#typeans, .mac code#typeans {
		font-size: 1em;
	}
}

@media (max-width: 769px) {
	.win code#typeans, .mac code#typeans {
		font-size: .575em;
	}
}

#typeans {
	text-align: center;
}

.cloze {
	text-align: center;
	line-height: 0;
	color: #077a09;
}

input#typeans {
	color: black;
}

input#typeans[title] {
	line-height: 1em;
}

code#typeans {
	line-height: 1.5;
	text-align: center;
	color: #00803F;
}

.td_back {
	text-align: center;
}

#typeans span {
	background: #fff;
	text-align: center;
}

.ipad .typeBad {
	background-color: red;
}

.typeBad {
	color: #dc322f;
	font-weight: normal;
}

.typeMissed, .typePass {
	color: #268bd2;
	font-weight: normal;
}

.typeGood {
	color: #2ed85a;
	font-weight: normal;
}

/* ------------------------------- Buttons Fonts---------------------------------- */

#overlay_title_close #p_button_close {
	text-align: center;
	color: bisque;
	font-family: Verdana, serif;
	font-size: 3em;
}

#overlay_title #p_button, .overlay .p_app_button {
	font-family: "CronosPro-Regular";
	text-align: center;
	color: bisque;
}

.mac #overlay_title #p_button, .mac .p_app_button, .win #overlay_title #p_button, .win .p_app_button {
	font-family: "Cronos Pro";
}

.overlay .p_app_button {
	font-size: 2em;
	line-height: 170%;
	line-height: 170%;
}

@media (max-width: 1025px) {
	.overlay .p_app_button {
		font-size: 2.5em;
		margin-bottom: 0;
		line-height: 250%;
	}
}

@media (max-width: 769px) {
	.overlay .p_app_button {
		font-size: 1.3em;
		margin-bottom: 0;
		line-height: 250%;
	}
}

@media (max-width: 668px) {
	.overlay .p_app_button {
		font-size: 1.4em;
	}
}

@media (max-width: 321px) {
	.overlay .p_app_button {
		font-size: 1em;
	}
}

.mac .overlay .p_app_button, .win .overlay .p_app_button, .ipad .overlay .p_app_button {
	line-height: 150%;
}

@media (max-width: 769px) {
	.mac .overlay .p_app_button, .win .overlay .p_app_button, .ipad .overlay .p_app_button {
		line-height: 250%;
	}
}

#overlay_title #p_button {
	font-size: 4rem;
	line-height: 100%;
}

@media (max-width: 769px) {
	#overlay_title #p_button {
		font-size: 3.5em;
		margin-bottom: 0;
	}
}

.win #overlay_title #p_button, .mac #overlay_title #p_button {
	line-height: 100%;
}

span.close {
	color: white;
	font-size: 4rem;
	text-align: center;
	line-height: 90%;
}

@media (max-width: 769px) {
	span.close {
		font-size: 4em;
	}
}

@media (max-width: 737px) {
	span.close {
		font-size: 3em;
	}
}

@media (max-width: 569px) {
	span.close {
		font-size: 2.5em;
	}
}

@media (max-width: 321px) {
	span.close {
		font-size: 2em;
	}
}

.deck {
	font-size: 1.3rem;
}

@media (max-width: 1025px) {
	.deck {
		font-size: 1.2em;
	}
}

.deck kbd {
	color: black;
}

/*==================================== 
						 HIGHLIGHT
=====================================*/

pre.highlight, div.highlight {
	font-family: "CronosPro-Regular";
	font-weight: 100;
	word-spacing: 0px;
	font-size: 1.3em;
	line-height: 120%;
	text-align: left;
	word-wrap: break-word;
	white-space: pre;
	white-space: pre-wrap;
}

.mac pre.highlight, .win pre.highlight .mac div.highlight, .win div.highlight {
	font-family: "Cronos Pro";
}

/*==================================== 
   Buttons
=====================================*/

.arrow_06B13_line, .arrow_06B13_line_back {
	z-index: 0;
	display: block;
	background: url(_arrow_06B13_lines_advanced.png) no-repeat 0 0;
	background-size: 100%;
	position: absolute;
	top: 14px;
	width: 85px;
	height: 198px;
	opacity: 1;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

@media (max-width: 769px) {
	.arrow_06B13_line, .arrow_06B13_line_back {
		display: none;
	}
}

.arrow_06B13_line {
	left: 30px;
}

.arrow_06B13_line_back {
	right: 31px;
}

.arrow_06B13_line:hover~.arrow_06B13 {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

/*----------- Buttons---------------------*/

button.header-close {
	z-index: 200;
	display: block;
	opacity: 0;
	position: absolute;
	border: solid white 3px;
	border-radius: 50%;
	text-align: center;
	left: .5em;
	top: .5em;
	padding: 0;
	width: 60px;
	height: 60px;
	background: #1dd16e;
	-webkit-transition: all 1000ms ease-out;
	transition: all 1000ms ease-out;
}

@media (max-width: 769px) {
	button.header-close {
		top: 1em;
		width: 60px;
		height: 60px;
	}
}

@media (max-width: 737px) {
	button.header-close {
		width: 55px;
		height: 55px;
		top: 1.3em;
	}
}

@media (max-width: 668px) {
	button.header-close {
		width: 50px;
		height: 50px;
		top: .8em;
	}
}

@media (max-width: 569px) {
	button.header-close {
		width: 45px;
		height: 45px;
	}
}

@media (max-width: 376px) {
	button.header-close {
		width: 42px;
		height: 42px;
		top: .5em;
	}
}

@media (max-width: 321px) {
	button.header-close {
		width: 38px;
		height: 38px;
		top: .7em;
	}
}

button.header-close.active {
	z-index: 200;
	display: inline-block;
	opacity: 1;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

@media (max-width: 769px) {
	span.close {
		bottom: 50px;
		-webkit-transform: rotate(77deg);
		transform: rotate(77deg);
	}
}

/*_____________________button title____________________*/

@media (max-width: 769px) {
	.circle {
		width: 100%;
		margin: 0 auto;
	}
}

@media (max-width: 321px) {
	.circle {
		width: 100%;
		margin: 0 auto;
		height: 30px;
		padding: 0 .5em;
	}
}

.buttons {
	padding-top: 1em;
	padding-bottom: .5em;
}

.circlePositioner_title, .circlePositioner_title_back {
	z-index: 1;
	display: block;
	position: absolute;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0;
	width: 67px;
	text-align: center;
	top: 133px;
	background-color: transparent;
	-webkit-transition: all 1000ms ease-out;
	transition: all 1000ms ease-out;
}

@media (max-width: 769px) {
	.circlePositioner_title, .circlePositioner_title_back {
		display: none;
		width: 46px;
		top: 109px;
	}
}

@media (max-width: 668px) {
	.circlePositioner_title, .circlePositioner_title_back {
		top: 72px;
		width: 37px;
	}
}

@media (max-width: 438px) {
	.circlePositioner_title, .circlePositioner_title_back {
		top: 72px;
		width: 37px;
	}
}

@media (max-width: 321px) {
	.circlePositioner_title, .circlePositioner_title_back {
		display: none;
	}
}

.circlePositioner_title.active, .circlePositioner_title_back.active {
	display: none;
}

.circlePositioner_title {
	left: 36px;
}

@media (max-width: 769px) {
	.circlePositioner_title {
		top: 107px;
		left: 29px;
	}
}

@media (max-width: 737px) {
	.circlePositioner_title {
		top: 107px;
		left: 29px;
	}
}

@media (max-width: 668px) {
	.circlePositioner_title {
		top: 72px;
		left: 28px;
	}
}

@media (max-width: 438px) {
	.circlePositioner_title {
		left: 8.5px;
	}
}

.circlePositioner_title_back {
	right: 43px;
}

@media (max-width: 769px) {
	.circlePositioner_title_back {
		right: 39.5px;
		top: 107px;
	}
}

@media (max-width: 668px) {
	.circlePositioner_title_back {
		top: 72px;
		right: 28.5px;
	}
}

@media (max-width: 438px) {
	.circlePositioner_title_back {
		right: 8.5px;
	}
}

.circlePositioner_title_close {
	z-index: 100;
	display: block;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	margin-top: -15px;
	width: 76px;
	text-align: center;
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	background-color: transparent;
	-webkit-transition: all 1000ms ease-out;
	transition: all 1000ms ease-out;
}

.mainCircle_title {
	/*  background-color: cadetblue;*/
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: block;
	overflow: hidden;
	cursor: pointer;
	opacity: .99;
	-webkit-transition: all 1s;
	transition: all 1s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

@media (max-width: 769px) {
	.mainCircle_title {
		display: none;
		width: 52px;
		height: 52px;
	}
}

@media (max-width: 668px) {
	.mainCircle_title {
		width: 34px;
		height: 34px;
	}
}

@media (max-width: 438px) {
	.mainCircle_title {
		width: 34px;
		height: 34px;
	}
}

.mainCircle_title.active {
	background-color: white;
}

#overlay_title {
	background-color: #077a09;
	height: 64px;
	width: 64px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: -47px;
	border-radius: 50%;
	-webkit-transition: all .3s;
	transition: all .3s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

@media (max-width: 769px) {
	#overlay_title {
		width: 48px;
		height: 48px;
	}
}

@media (max-width: 668px) {
	#overlay_title {
		width: 30px;
		height: 30px;
	}
}

#overlay_title.active {
	background-color: #1dd16e;
}

.spinningContainer_title {
	background-color: transparent;
	border-radius: 30%;
	height: 24px;
	width: 100%;
	margin: 25px 20px 0px auto;
	position: relative;
	-webkit-animation: mymoveR 1s ease-in-out;
	animation: mymoveR 1s ease-in-out;
	-webkit-transition: all 2s cubic-bezier(0.18, 1.51, 0.85, 1.4);
	transition: all 2s cubic-bezier(0.18, 1.51, 0.85, 1.4);
}

.leftContainer_title {
	background-color: transparent;
	/*rgba(255, 255, 255, 0.79);*/
	border-radius: 40%;
	height: 10px;
	width: 10px;
	float: left;
}

.rightContainer_title {
	background-color: transparent;
	/*rgba(255, 255, 255, 0.79);*/
	border-radius: 40%;
	height: 10px;
	width: 10px;
	float: right;
}

#overlay_title_close {
	background-color: #1dd16e;
	height: 70px;
	width: 70px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: -46.5px;
	border-radius: 50%;
	-webkit-transition: all .3s;
	transition: all .3s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

#overlay_title_close #p_button_close {
	position: relative;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	background: none;
	display: inline-block;
	-webkit-transition: all .3s;
	transition: all .3s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

/*-----------------------------------Appendix Buttons-----------------------*/

.circlePositioner {
	display: inline-block;
	position: relative;
	width: 49%;
	text-align: center;
	margin-bottom: -2px;
	padding: auto;
}

@media (max-width: 769px) {
	.circlePositioner {
		height: auto;
		padding: 0 auto;
	}
}

@media (max-width: 321px) {
	.circlePositioner {
		height: auto;
	}
}

.circlePositioner:nth-child(even) {
	margin-right: .2em !important;
}

.mainCircle {
	width: 100%;
	height: 48px;
	border-radius: 0.25em;
	display: block;
	overflow: hidden;
	cursor: pointer;
	opacity: .99;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

@media (max-width: 769px) {
	.mainCircle {
		width: 100%;
		height: 55px;
	}
}

@media (max-width: 668px) {
	.mainCircle {
		height: 45px;
	}
}

@media (max-width: 569px) {
	.mainCircle {
		height: 40px;
	}
}

@media (max-width: 438px) {
	.mainCircle {
		height: 37px;
	}
}

@media (max-width: 376px) {
	.mainCircle {
		height: 35px;
	}
}

@media (max-width: 321px) {
	.mainCircle {
		height: 35px;
	}
}

.mainCircle.active {
	background-color: white;
}

.overlay {
	background-color: #077a09;
	height: 43px;
	width: 99.5%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: -46px;
	border-radius: 0.25em;
	-webkit-transition: all .3s;
	transition: all .3s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

@media (max-width: 769px) {
	.overlay {
		margin-top: -46.5px;
		border-radius: 0.25em;
		width: 99%;
		height: 50px;
		margin-bottom: 0;
	}
}

@media (max-width: 668px) {
	.overlay {
		height: 40px;
	}
}

@media (max-width: 569px) {
	.overlay {
		height: 35px;
	}
}

@media (max-width: 438px) {
	.overlay {
		height: 32px;
	}
}

@media (max-width: 376px) {
	.overlay {
		height: 30px;
	}
}

@media (max-width: 321px) {
	.overlay {
		height: 30px;
	}
}

.overlay.active {
	background-color: #1dd16e !important;
}

#overlay_title #p_button, .overlay .p_app_button {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	background: none;
	display: inline-block;
	-webkit-transition: all .3s;
	transition: all .3s;
	-webkit-transition: -webkit-transform 1s;
	transition: -webkit-transform 1s;
	transition: transform 1s;
	transition: transform 1s, -webkit-transform 1s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

#overlay_title #p_button.active, .overlay .p_app_button.active {
	color: white !important;
}

#p_button.active {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.mainCircle:hover {
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	-webkit-transition-delay: .8s;
	transition-delay: .8s;
}

.spinningContainer {
	background-color: transparent;
	border-radius: 30%;
	height: 24px;
	width: 100%;
	margin: 25px 20px 0px auto;
	position: relative;
	-webkit-animation: mymoveR 1s ease-in-out;
	animation: mymoveR 1s ease-in-out;
	-webkit-transition: all 2s;
	transition: all 2s;
	-webkit-transition-timing-function: cubic-bezier(0.18, 1.51, 0.85, 1.4);
	transition-timing-function: cubic-bezier(0.18, 1.51, 0.85, 1.4);
}

.spinningContainer.active {
	opacity: .5;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: opacity 4.5s ease-out;
	transition: opacity 4.5s ease-out;
	-webkit-animation: mymove 2s cubic-bezier(1, 0.22, 1, 0.92);
	animation: mymove 2s cubic-bezier(1, 0.22, 1, 0.92);
}

.mainCircle:hover .overlay {
	background-color: #1dd16e;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.ipad .mainCircle:hover .overlay {
	background-color: #077a09;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.iphone .mainCircle:hover .overlay, .mobile .mainCircle:hover .overlay {
	background-color: #077a09;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.mainCircle:hover .overlay .p_app_button {
	color: white;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.ipad .mainCircle:hover .overlay .p_app_button, .iphone .mainCircle:hover .overlay .p_app_button, .mobile .mainCircle:hover .overlay .p_app_button {
	color: bisque;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.leftContainer {
	float: left;
	margin-left: 1px;
}

.rightContainer {
	float: right;
	margin-right: 1px;
}

@-webkit-keyframes mymove {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(1080deg);
		transform: rotate(1080deg);
	}
}

@keyframes mymove {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(1080deg);
		transform: rotate(1080deg);
	}
}

@-webkit-keyframes mymoveR {
	from {
		-webkit-transform: rotate(1080deg);
		transform: rotate(1080deg);
	}
	to {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes mymoveR {
	from {
		-webkit-transform: rotate(1080deg);
		transform: rotate(1080deg);
	}
	to {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@-webkit-keyframes myscale {
	0% {
		-webkit-transform: scaleY(1.2);
		transform: scaleY(1.2);
	}
	25% {
		-webkit-transform: scaleY(1.4);
		transform: scaleY(1.4);
	}
	50% {
		-webkit-transform: scaleY(1.6);
		transform: scaleY(1.6);
	}
	75% {
		-webkit-transform: scaleY(1.8);
		transform: scaleY(1.8);
	}
	100% {
		-webkit-transform: scaleY(2);
		transform: scaleY(2);
	}
}

@keyframes myscale {
	0% {
		-webkit-transform: scaleY(1.2);
		transform: scaleY(1.2);
	}
	25% {
		-webkit-transform: scaleY(1.4);
		transform: scaleY(1.4);
	}
	50% {
		-webkit-transform: scaleY(1.6);
		transform: scaleY(1.6);
	}
	75% {
		-webkit-transform: scaleY(1.8);
		transform: scaleY(1.8);
	}
	100% {
		-webkit-transform: scaleY(2);
		transform: scaleY(2);
	}
}

/*----------- hamburgers ---------------------*/

.gamb-wrap, .gamb-wrap-back {
	display: none;
	position: absolute;
}

@media (max-width: 769px) {
	.gamb-wrap, .gamb-wrap-back {
		z-index: 1;
		display: block;
		margin-right: auto;
		margin-left: auto;
		margin-top: 0;
		width: 87px;
		text-align: center;
		top: 35px;
		background-color: transparent;
		-webkit-transition: 1000ms ease-out;
		transition: 1000ms ease-out;
		width: 46px;
	}
}

@media (max-width: 668px) {
	.gamb-wrap, .gamb-wrap-back {
		top: 32px;
		width: 37px;
	}
}

@media (max-width: 438px) {
	.gamb-wrap, .gamb-wrap-back {
		display: none;
	}
}

.gamb-wrap {
	left: 56px;
}

@media (max-width: 769px) {
	.gamb-wrap {
		left: 29px;
	}
}

@media (max-width: 737px) {
	.gamb-wrap {
		left: 20px;
	}
}

@media (max-width: 668px) {
	.gamb-wrap {
		top: 32px;
		left: 16px;
	}
}

@media (max-width: 438px) {
	.gamb-wrap {
		left: 8px;
	}
}

.gamb-wrap-back {
	right: 63px;
}

@media (max-width: 769px) {
	.gamb-wrap-back {
		right: 39.5px;
	}
}

@media (max-width: 737px) {
	.gamb-wrap-back {
		right: 20px;
	}
}

@media (max-width: 668px) {
	.gamb-wrap-back {
		top: 32px;
	}
}

@media (max-width: 569px) {
	.gamb-wrap-back {
		margin-right: -15px;
	}
}

/*_____________________button hover over___________________*/

.myButt {
	z-index: 0;
	width: 10em;
	outline: none;
	border: none;
	padding: .5em;
	display: block;
	margin: 50px auto;
	cursor: pointer;
	font-size: 1.6em;
	text-align: center;
	background-color: transparent;
	-webkit-box-shadow: 0 1px 14px rgba(0, 0, 0, 0.17);
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.17);
	position: relative;
	border: 1px solid #077a09;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.five {
	overflow: hidden;
	color: rgba(7, 122, 9, 0.4);
}

.five .layer {
	color: #FAF4E5;
	text-align: center;
	position: absolute;
	top: -4.688em;
	width: 100%;
	left: 0;
	padding: .5em 0;
	background-color: #00803F;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.five:hover .layer {
	top: 0;
}

/*==================================== 
   Appendixes
=====================================*/

.appendixes {
	background: #4e4e4e;
	/* rgba(0, 0, 0, .65);*/
	display: block;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	/* lets it scroll lazy */
	width: 100%;
	max-width: 1440px;
	position: fixed;
	margin: 0 auto;
	z-index: 13;
	margin-top: -395px;
	padding-left: 1.250em;
	padding-right: 1.250em;
	font-size: 1.3em;
	line-height: 1.5;
	max-height: 0;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transition: all 0.95s;
	transition: all 0.95s;
	-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@media (max-width: 769px) {
	.appendixes {
		margin-top: -380px;
		font-size: 1.2em;
	}
}

@media (max-width: 737px) {
	.appendixes {
		margin-top: -380px;
		font-size: 1.1em;
	}
}

@media (max-width: 668px) {
	.appendixes {
		margin-top: -310px;
	}
}

@media (max-width: 569px) {
	.appendixes {
		margin-top: -280px;
		font-size: 1em;
	}
}

@media (max-width: 438px) {
	.appendixes {
		margin-top: -263px;
	}
}

@media (max-width: 376px) {
	.appendixes {
		margin-top: -270px;
		font-size: .925em;
	}
}

@media (max-width: 321px) {
	.appendixes {
		padding-left: .125em;
		padding-right: .125em;
		margin-top: -250px;
	}
}

.appendixes.active {
	max-height: 100%;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.appendixes.active_1 {
	max-height: 0;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}

.ipad .appendixes {
	margin-top: -340px;
}

@media (max-width: 769px) {
	.ipad .appendixes {
		margin-top: -380px;
	}
}

/*==================================== 
   Modal Window styles
=====================================*/

.mac .modal__overlay, .win .modal__overlay {
	max-height: 100%;
	-webkit-transition: all 0.55s;
	transition: all 0.55s;
	max-width: 1440px;
	margin: 0 auto;
}

.modal__overlay {
	display: none;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	height: 0;
	padding: 0;
	padding-bottom: 1em;
	opacity: 0;
	background: #4e4e4e;
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	z-index: -100;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transition: all 1s;
	transition: all 1s;
	-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.modal__overlay.active {
	opacity: 1;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	/* lets it scroll lazy */
	height: 100%;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.modal__overlay.active .modal__wrap {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	/* lets it scroll lazy */
}

.modal__overlay.active pre.highlight, .modal__overlay.active div.highlight {
	overflow-y: auto;
	-webkit-overflow-y-scrolling: touch;
	/* lets it scroll lazy */
}

@media (max-width: 1025px) {
	.ipad .modal__overlay {
		height: 100%;
	}
}

.modal__wrap {
	position: relative;
	margin: 1.5em auto 1em 8%;
	width: 90%;
	max-height: 92%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	/* lets it scroll lazy */
}

@media (max-width: 438px) {
	.modal__wrap {
		width: 85%;
	}
}

.modal__wrap h2 {
	margin-bottom: 1em;
	text-transform: uppercase;
}

.modal__wrap p {
	text-align: justify;
}

.modal div#modal__trigger:focus~label {
	ransform: scale(0.97);
}

input#modal__trigger {
	position: absolute;
	top: -1000px;
}

img {
	max-width: 1024px;
	max-height: 2500px;
}

/*==================================== 
 							ICONS
=====================================*/

.material-icons {
	display: none;
	z-index: 1500;
	font-size: 2em;
	line-height: 1.5;
	color: white;
	position: fixed;
	border-radius: 50%;
	height: 1.5em;
	width: 1.5em;
	left: 93%;
	top: .6em;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	-webkit-transition: all 0.5s ease, background-color 0.2s ease, -webkit-transform 0.3s ease;
	transition: all 0.5s ease, background-color 0.2s ease, -webkit-transform 0.3s ease;
	transition: all 0.5s ease, background-color 0.2s ease, transform 0.3s ease;
	transition: all 0.5s ease, background-color 0.2s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}

@media (max-width: 438px) {
	.material-icons {
		left: 90%;
	}
}

@media (max-width: 321px) {
	.material-icons {
		font-size: 1.5em;
	}
}

.material-icons:after {
	content: "";
	width: 100%;
	height: 100%;
	border: solid 2px;
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	position: absolute;
	height: 1.5em;
	line-height: 1.3;
	top: 0px;
	left: 0px;
	border-radius: 50%;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.material-icons {
	background-color: #077a09;
	background-repeat: no-repeat;
	background-position: center;
	line-height: 150%;
}

.mac .material-icons {
	line-height: 150%;
}

.win .material-icons {
	line-height: 150%;
}

.material-icons:hover {
	color: #077a09;
}

.material-icons:after {
	border-color: #077a09;
}

.material-icons:hover {
	background-color: transparent;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	cursor: pointer;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/*==================================== 
 							HIGHLIGHT
=====================================*/

pre.highlight, div.highlight {
	display: block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 1.5em auto 1em 8%;
	width: 90%;
	padding: 2em;
	border-radius: .2em;
	background: #d2d4d4;
	max-height: 70%;
}

/*==================================== 
   Selectable
=====================================*/

#feedback {
	font-size: 1em;
}

#selectbox {
	display: block;
	margin: 0 auto;
	width: 70%;
	max-width: 910px;
	overflow: auto;
	-webkit-tap-highlight-color: transparent;
}

@media (max-width: 769px) {
	#selectbox {
		width: 70%;
		margin: 0 auto;
	}
}

@media (max-width: 737px) {
	#selectbox {
		width: 80%;
	}
}

@media (max-width: 438px) {
	#selectbox {
		width: 100%;
		margin: 0 auto;
	}
}

#selectbox.back {
	display: inline-block;
	border-collapse: separate;
	border-spacing: 2px;
	-webkit-box-shadow: 0 0 1em #b9f0b7;
	box-shadow: 0 0 1em #b9f0b7;
	margin: 10px auto;
	max-width: 910px;
	cursor: pointer;
	-webkit-transition: .15s;
	transition: .15s;
}

#selectbox.back.active-selectbox {
	-webkit-box-shadow: 0 0 1em #f7d2d5;
	box-shadow: 0 0 1em #f7d2d5;
}

@media (max-width: 769px) {
	#selectbox.back {
		width: 70%;
		margin: 10px;
	}
}

@media (max-width: 737px) {
	#selectbox.back {
		width: 80%;
	}
}

@media (max-width: 438px) {
	#selectbox.back {
		width: 90%;
	}
}

#selectable {
	display: block;
	overflow: auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #576366;
	-webkit-text-decoration: none solid #576366;
	text-decoration: none solid #576366;
	-webkit-column-rule-color: #576366;
	column-rule-color: #576366;
	-webkit-perspective-origin: 165px 160px;
	perspective-origin: 165px 160px;
	-webkit-transform-origin: 165px 160px;
	transform-origin: 165px 160px;
	caret-color: #576366;
	border: 0px none #576366;
	/* style | variant | weight | stretch | size/line-height | family */
	font-size: 1em;
	line-height: 1.5em;
	font-family: Helvetica;
	list-style: none outside none;
	margin: 0px;
	outline: #576366 none 0px;
	padding: 0px;
	width: 99.99%;
}

#selectable li::before {
	display: none;
}

#selectable li {
	background-color: #F1F2F2;
	-webkit-text-decoration: none solid #576366;
	text-decoration: none solid #576366;
	-webkit-column-rule-color: #576366;
	column-rule-color: #576366;
	-webkit-perspective-origin: 165px 40px;
	perspective-origin: 165px 40px;
	-webkit-transform-origin: 165px 40px;
	transform-origin: 165px 40px;
	caret-color: #576366;
	border-top: 0px none #3f8abf;
	border-right: 0px none #3f8abf;
	border-bottom: 1px solid #E2E4E5;
	border-left: 0px none #3f8abf;
	cursor: pointer;
	text-indent: 0;
	list-style-type: none !important;
	outline: #576366 none 0px;
	margin: 0;
	padding: 1.8em 1.2em 1.8em 1.2em;
	font-weight: 100;
	text-align: left;
	height: auto;
	z-index: 100;
	-webkit-transition: background-color .3s;
	transition: background-color .3s;
}

@media (max-width: 769px) {
	#selectable li {
		padding: 1.5em 1em 1.5em 1em;
		font-weight: 200;
	}
}

#selectable li.active-selecting {
	background: #fff;
	border-color: #d4d9dd;
	-webkit-box-shadow: rgba(0, 0, 0, 0.05) 0 1px 0 0 inset;
	box-shadow: rgba(0, 0, 0, 0.05) 0 1px 0 0 inset;
}

@media (max-width: 438px) {
	#selectable li.active-selecting {
		background: #F39814;
		color: white !important;
	}
}

@media (max-width: 438px) {
	#selectable li.active-selecting>.div-content {
		color: white;
	}
}

@media (max-width: 438px) {
	#selectable li.active-wrong>.div-content {
		color: white;
	}
}

@media (max-width: 438px) {
	#selectable li.active-right>.div-content {
		color: white;
	}
}

#selectable li.active-wrong>strong.abc {
	color: #d52834;
	border-color: #d52834;
}

#selectable li.active-right>strong.abc {
	color: #2bb427;
	border-color: #2bb427;
}

@media (max-width: 438px) {
	#selectable li.active-wrong {
		color: white;
		background-color: #d52834;
	}
}

@media (max-width: 438px) {
	#selectable li.active-right {
		color: white;
		background-color: #2bb427;
	}
}

.ui-selectable {
	-ms-touch-action: none;
	touch-action: none;
}

.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}

.abc {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #7b8b8e;
	padding: .2em;
	left: 0;
	text-align: center;
	-webkit-text-decoration: none solid #7b8b8e;
	text-decoration: none solid #7b8b8e;
	width: auto;
	-webkit-column-rule-color: #7b8b8e;
	column-rule-color: #7b8b8e;
	-webkit-perspective-origin: 20px 20px;
	perspective-origin: 20px 20px;
	-webkit-transform-origin: 20px 20px;
	transform-origin: 20px 20px;
	caret-color: #7b8b8e;
	border: 2px solid #E2E4E5;
	border-radius: 5px 5px 5px 5px;
	/* style | variant | weight | stretch | size/line-height | family */
	font-size: 2rem;
	line-height: 1.8rem;
	font-family: Helvetica;
	font-weight: 500;
	list-style: none outside none;
	outline: #7b8b8e none 0px;
	-webkit-transition: color 0.3s ease 0s, border-color 0.3s ease 0s;
	transition: color 0.3s ease 0s, border-color 0.3s ease 0s;
}

@media (max-width: 769px) {
	.abc {
		font-size: 1.8em;
		font-weight: 300;
		padding: .3em;
	}
}

@media (max-width: 438px) {
	.abc {
		display: none;
	}
}

.abc.active-abc {
	color: #F39814;
	border-color: #F39814;
}

.abc .mac #selectable li:hover.active-abc {
	color: #F39814;
	border-color: #F39814;
}

.abc.active-right {
	color: #2bb427;
	border-color: #2bb427;
}

.abc.active-wrong {
	color: #d52834;
	border-color: #d52834;
}

.win .selectable-front li:hover .abc.active-abc, .mac .selectable-front li:hover .abc.active-abc {
	color: #F39814;
	border-color: #F39814;
}

.win .selectable-front li:hover .abc, .mac .selectable-front li:hover .abc {
	border-color: #4e5a64;
	color: #4e5a64;
}

.div-content {
	display: inline-block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 20px;
	width: 85%;
	color: #576366;
	cursor: pointer;
	text-align: left;
	-webkit-text-decoration: none solid #576366;
	text-decoration: none solid #576366;
	vertical-align: middle;
	-webkit-column-rule-color: #576366;
	column-rule-color: #576366;
	-webkit-perspective-origin: 115px 24.5px;
	perspective-origin: 115px 24.5px;
	-webkit-transform-origin: 115px 24.5px;
	transform-origin: 115px 24.5px;
	caret-color: #576366;
	border: 0px none #576366;
	font-size: 1.8rem;
	line-height: 1.5rem;
	font-family: Helvetica;
	list-style: none outside none;
	outline: #576366 none 0px;
}

@media (max-width: 1025px) {
	.div-content {
		font-size: 1.5em;
		line-height: 1em;
	}
}

@media (max-width: 438px) {
	.div-content {
		padding-left: 20px;
	}
}

#selectable>li>i, #selectable>li>div>i, #selectable>li>div>div>i, #selectable>li>div>div>div>i {
	font-style: normal;
	z-index: 0;
}

.ui-selectable-helper {
	display: none;
}

.arrow-main {
	display: none;
	right: 15px;
	float: right;
	color: black;
	overflow: hidden;
	width: 45px;
}

@media (max-width: 438px) {
	.arrow-main {
		display: block;
	}
}

/* Arrow & Hover Animation */

#more-arrows {
	-webkit-transform: scale(0.8);
	transform: scale(0.7);
	width: 80px;
	height: 70px;
	top: 3%;
	right: 20px;
	position: relative;
}

@media (max-width: 569px) {
	#more-arrows {
		-webkit-transform: scale(1);
		transform: scale(1);
		width: 80px;
		height: 70px;
		top: 3%;
		right: 20px;
		position: relative;
	}
}

@media (max-width: 438px) {
	#more-arrows {
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
		width: 80px;
		height: 70px;
		top: 3%;
		right: 20px;
		position: relative;
	}
}

@media (max-width: 321px) {
	#more-arrows {
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		width: 80px;
		height: 70px;
		top: 3%;
		right: 20px;
		position: relative;
	}
}

.arrow-main:focus polygon, #more-arrows:focus polygon {
	fill: #F39814;
	-webkit-transition: all .2s ease-out;
	transition: all .2s ease-out;
}

.arrow-main:focus polygon.arrow-bottom, #more-arrows:focus polygon.arrow-bottom {
	-webkit-transform: translateY(-18px);
	transform: translateY(-18px);
}

.arrow-main:focus polygon.arrow-top, #more-arrows:focus polygon.arrow-top {
	-webkit-transform: translateY(18px);
	transform: translateY(18px);
}

polygon {
	fill: #F39814;
	-webkit-transition: all .2s ease-out;
	transition: all .2s ease-out;
}

polygon.arrow-middle {
	opacity: 0.75;
}

polygon.arrow-top {
	opacity: 0.5;
}

/*==================================== 
  Images
=====================================*/

img {
	min-height: 30px;
	border-radius: 5px;
	margin: 0 auto;
	vertical-align: bottom;
}

.picture_1 {
	width: 74%;
}

.img_front {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 70%;
}

@media (max-width: 737px) {
	.img_front {
		max-width: 80%;
	}
}

@media (max-width: 438px) {
	.img_front {
		max-width: 90%;
	}
}

.img_front>img, .img_front>div>img {
	max-width: 956px;
}

@media (max-width: 737px) {
	.img_front>img, .img_front>div>img {
		max-width: 665px;
	}
}

@media (max-width: 438px) {
	.img_front>img, .img_front>div>img {
		max-width: 414px;
	}
}

.img_ap {
	float: right;
	margin-right: 0px;
	width: 20%;
}

.img-appendixes {
	display: inline-block;
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.img_front {
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.img_example>div>img, .img_example>img {
	border-radius: 0;
	max-width: 810px;
}

@media (max-width: 1025px) {
	.img_example>div>img, .img_example>img {
		max-width: 710px;
	}
}

@media (max-width: 769px) {
	.img_example>div>img, .img_example>img {
		max-width: 530px;
	}
}

.img_example {
	display: block;
	position: relative;
	opacity: 0;
	max-height: 0px;
	background: #fff;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-transition-property: max-height, opacity;
	-webkit-transition-duration: 300ms;
	-webkit-transition-timing-function: ease;
	-webkit-transition-delay: 100ms;
}

.img_example.active {
	max-height: 600px;
	opacity: 1;
	padding: .5em;
	margin-top: .3em;
}

@media (max-width: 668px) {
	.modal__wrap>img {
		max-width: 700px;
	}
}

@media (max-width: 569px) {
	.modal__wrap>img {
		max-width: 550px;
	}
}

@media (max-width: 438px) {
	.modal__wrap>img {
		max-width: 550px;
	}
}

@media (max-width: 376px) {
	.modal__wrap>img {
		max-width: 600px;
	}
}

.grid>img {
	max-width: 970px;
	max-height: 5800px;
}

@media (max-width: 769px) {
	.grid>img {
		max-width: 720px;
	}
}

@media (max-width: 737px) {
	.grid>img {
		max-width: 680px;
	}
}

@media (max-width: 668px) {
	.grid>img {
		max-width: 630px;
	}
}

@media (max-width: 569px) {
	.grid>img {
		max-width: 550px;
	}
}

@media (max-width: 438px) {
	.grid>img {
		max-width: 400px;
	}
}

@media (max-width: 376px) {
	.grid>img {
		max-width: 360px;
	}
}

@media (max-width: 321px) {
	.grid>img {
		max-width: 310px;
	}
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */

.hamburger {
	padding-right: 10px;
	display: inline-block;
	cursor: pointer;
	-webkit-transition-property: opacity, -webkit-filter;
	transition-property: opacity, -webkit-filter;
	transition-property: opacity, filter;
	transition-property: opacity, filter, -webkit-filter;
	-webkit-transition-duration: 0.15s;
	transition-duration: 0.15s;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}

.hamburger-box {
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative;
}

@media (max-width: 569px) {
	.hamburger-box {
		width: 30px;
	}
}

@media (max-width: 569px) {
	.hamburger-box {
		height: 18px;
	}
}

.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 40px;
	height: 4px;
	background-color: #00803F;
	border-radius: 4px;
	position: absolute;
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	-webkit-transition-duration: 0.15s;
	transition-duration: 0.15s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
}

@media (max-width: 569px) {
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
		width: 30px;
	}
}

@media (max-width: 569px) {
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
		height: 2px;
	}
}

.hamburger-inner::before, .hamburger-inner::after {
	content: "";
	display: block;
}

.hamburger-inner::before {
	top: -10px;
}

@media (max-width: 569px) {
	.hamburger-inner::before {
		top: -8px;
	}
}

.hamburger-inner::after {
	bottom: -10px;
}

@media (max-width: 569px) {
	.hamburger-inner::after {
		bottom: -8px;
	}
}

/*
   * Arrow Alt
   */

.hamburger--arrowalt .hamburger-inner::before {
	-webkit-transition: top 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: top 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt .hamburger-inner::after {
	-webkit-transition: bottom 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: bottom 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt.is-active .hamburger-inner::before {
	top: 0;
	-webkit-transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
	transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
	-webkit-transition: top 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: top 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

@media (max-width: 569px) {
	.hamburger--arrowalt.is-active .hamburger-inner::before {
		-webkit-transform: translate3d(-6px, -7.5px, 0) rotate(-45deg) scale(0.7, 1);
		transform: translate3d(-6px, -7.5px, 0) rotate(-45deg) scale(0.7, 1);
	}
}

.hamburger--arrowalt.is-active .hamburger-inner::after {
	bottom: 0;
	-webkit-transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
	transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
	-webkit-transition: bottom 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: bottom 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

@media (max-width: 569px) {
	.hamburger--arrowalt.is-active .hamburger-inner::after {
		-webkit-transform: translate3d(-6px, 7.5px, 0) rotate(45deg) scale(0.7, 1);
		transform: translate3d(-6px, 7.5px, 0) rotate(45deg) scale(0.7, 1);
	}
}

/*
   * Arrow Alt Right
   */

.hamburger--arrowalt-r .hamburger-inner::before {
	-webkit-transition: top 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: top 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt-r .hamburger-inner::after {
	-webkit-transition: bottom 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: bottom 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt-r.is-active .hamburger-inner::before {
	top: 0;
	-webkit-transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
	transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
	-webkit-transition: top 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: top 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

@media (max-width: 569px) {
	.hamburger--arrowalt-r.is-active .hamburger-inner::before {
		-webkit-transform: translate3d(6px, -7.5px, 0) rotate(45deg) scale(0.7, 1);
		transform: translate3d(6px, -7.5px, 0) rotate(45deg) scale(0.7, 1);
	}
}

.hamburger--arrowalt-r.is-active .hamburger-inner::after {
	bottom: 0;
	-webkit-transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
	transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
	-webkit-transition: bottom 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: bottom 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
	transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

@media (max-width: 569px) {
	.hamburger--arrowalt-r.is-active .hamburger-inner::after {
		-webkit-transform: translate3d(6px, 7.5px, 0) rotate(-45deg) scale(0.7, 1);
		transform: translate3d(6px, 7.5px, 0) rotate(-45deg) scale(0.7, 1);
	}
}