/* Fonts */

@font-face {
	font-family: "Jalal LT W20 Light";
	src: url("https://jass.im/assets/fonts/ff6ba6be-c1a8-4444-b323-45261b94302c.eot?#iefix");
	src: url("https://jass.im/assets/fonts/ff6ba6be-c1a8-4444-b323-45261b94302c.eot?#iefix") format("eot"), url("https://jass.im/assets/fonts/e3434995-09df-4fc3-990c-896e346afa7e.woff2") format("woff2"), url("https://jass.im/assets/fonts/e4e8fe89-26ce-41a8-bbe5-c62bb90a4310.woff") format("woff"), url("https://jass.im/assets/fonts/4321f007-8ab3-4da1-8827-b4d0aff9fecc.ttf") format("truetype"), url("https://jass.im/assets/fonts/b0357bb5-1ab9-4889-94b4-85baee7aa715.svg#b0357bb5-1ab9-4889-94b4-85baee7aa715") format("svg");
}

@font-face {
	font-family: "Jalal LT W20 Bold";
	src: url("https://jass.im/assets/fonts/1885f6b0-957e-4ff5-a6f2-04cc2ba3c954.eot?#iefix");
	src: url("https://jass.im/assets/fonts/1885f6b0-957e-4ff5-a6f2-04cc2ba3c954.eot?#iefix") format("eot"), url("https://jass.im/assets/fonts/1e3edc88-d611-4132-8a6a-c9a282b49482.woff2") format("woff2"), url("https://jass.im/assets/fonts/296d3de6-0426-4221-88a5-a0d041f25d06.woff") format("woff"), url("https://jass.im/assets/fonts/56575a64-e5ce-4080-b07d-6d95ba817490.ttf") format("truetype"), url("https://jass.im/assets/fonts/a798b1a1-9fe1-413b-bb8b-b112b265bec3.svg#a798b1a1-9fe1-413b-bb8b-b112b265bec3") format("svg");
}

@font-face {
	font-family: "Janna LT W20 Regular";
	src: url("https://jass.im/assets/fonts/a9c47d30-0eca-434f-8082-ac141c4c97b3.eot?#iefix");
	src: url("https://jass.im/assets/fonts/a9c47d30-0eca-434f-8082-ac141c4c97b3.eot?#iefix") format("eot"), url("https://jass.im/assets/fonts/b5606736-5656-4140-a171-fee29f8a2c21.woff2") format("woff2"), url("https://jass.im/assets/fonts/26c24286-5aab-4747-81b9-54330e77fb14.woff") format("woff"), url("https://jass.im/assets/fonts/9c4c7fff-85b6-442f-9726-af5f49d49e53.ttf") format("truetype"), url("https://jass.im/assets/fonts/a24f53ee-e15e-4931-89a3-b6f17fbfcd72.svg#a24f53ee-e15e-4931-89a3-b6f17fbfcd72") format("svg");
}

@font-face {
	font-family: "Janna LT W20 Bold";
	src: url("https://jass.im/assets/fonts/40e91b18-f7fd-44d2-935d-8f2f5a46d380.eot?#iefix");
	src: url("https://jass.im/assets/fonts/40e91b18-f7fd-44d2-935d-8f2f5a46d380.eot?#iefix") format("eot"), url("https://jass.im/assets/fonts/183c81cc-2eaf-469b-848d-7b8ae60dc6c3.woff2") format("woff2"), url("https://jass.im/assets/fonts/132c0c0f-7a5e-429e-a7dc-a6b0a843a6fc.woff") format("woff"), url("https://jass.im/assets/fonts/a419a57e-c14d-47b1-b6f6-01fda5c3b099.ttf") format("truetype"), url("https://jass.im/assets/fonts/1088eb5b-cc92-428f-ac4c-0639886ce087.svg#1088eb5b-cc92-428f-ac4c-0639886ce087") format("svg");
}

/* General */

body {
    font-family: "Jalal LT W20 Light";
    color: #212121;
    font-size: 1.125em;
}

/* Formating */

h1, h2, h3 {
    font-family: "Janna LT W20 Bold";
}

h4, h5, h6 {
    font-family: "Jalal LT W20 Bold";
}

p {
    margin: 0;
    margin-bottom: 15px;
    padding: 0;
    text-align: justify;
}

/* Framework */

.title-bar {
    background: #212121;
	position: fixed;
    top: 0;
    right: 0;
    width: 100%;
}

.title-bar-title {
    font-family: "Janna LT W20 Bold";
    font-weight: normal;
}

.menu-icon:hover::after {
    background: #fff;
    box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
}

.off-canvas-content {
    box-shadow: none;
    background: #fafafa;
}

.off-canvas-wrapper {
    background: #212121;
}

.js-off-canvas-exit {
    background: rgba(255,255,255,0.8);
}

.pagination {
    margin-bottom: 0;
    font-family: "Janna LT W20 Bold";
}

.pagination .disabled {
    color: #b2dfdb;
}

.pagination a, .pagination button {
    color: #004d40;
    border-radius: 7px;
}

.pagination a:hover, .pagination button:hover {
    background: #b2dfdb;
}

.pagination .current {
    background: #004d40;
    border-radius: 7px;
}

.pagination .ellipsis::after {
    color: #b2dfdb;
}

/* Edits */

a.more {
	display: none !important;
}

div#os-share-count {
	margin-right: 5px;
}

/* Sidebar */

div#sidebar {
    background: none;
    color: #fff;
}

div#sidebar img#logo {
    width: 175px;
    margin: 25px 0 15px 0;
    border-radius: 100%;
    padding: 15px;
    background: #004d40;
}

div#sidebar a.link {
    font-family: "Janna LT W20 Bold";
    color: #fff;
}

div#sidebar a.link:hover {
    background: #004d40;
    border-radius: 999px;
}

div#sidebar a.icon img {
    width: 40px;
    background: #fff;
    border-radius: 100%;
    margin-top: 15px;
    background: #424242;
    padding: 4px;
}

div#sidebar a.icon:hover img {
    background: #004d40;
}

/* Section */

div.section {
    background: #004d40;
    margin-bottom: 25px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    color: #fff;
    padding: 10px 0 15px 0;
    text-align: center;
}

div.section h2 {
	margin: 0;
    padding: 0;
}

/* Content */

div.content {
    min-height: 100vh;
    background: #fff;
    margin-bottom: 25px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    padding: 50px 25px;
    border-radius: 15px;
}

div.content h1, div.content h2, div.content h3, div.content h5 {
    color: #004d40;
}

div.content h1 {
    margin-bottom: 25px;
}

div.content a.button {
    color: #fff;
    background: #009688;
    border-radius: 999px;
    font-family: "Janna LT W20 Bold";
    font-size: 1em;
}

div.content a.button:hover {
    color: #fff;
    background: #004d40;
}

div.content hr {
    border: 0;
    border-bottom: 1px solid #eee;
}

div.content span {
    color: #009688;
}

div.content span.bullet {
    margin-left: 7px;
}

div.content span.mdash {
    float: right;
    margin-left: 7px;
    line-height: 2em;
    color: #004d40;
}

div.content img.icon {
    width: 150px;
}

div.content img.jassim {
    width: 200px;
    border-radius: 100%;
}

div.content a {
    color: #009688;
}

div.content a:hover {
    color: #004d40;
}

div.content h1, div.content h1 a {
    color: #004d40;
}

div.content h1 a:hover {
    color: #009688;
}

div.blog img, div.guide img, div.articles img {
	text-align: center;
    display: block;
    margin: 0 auto;
    max-width: 50%;
}

div#guide h5 {
    color: #009688;
}

div#guide li.chapter {
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 10px;
}

div#guide li.page a {
    color: #004d40;
}

div#guide li.page a:hover {
    color: #009688;
}

div#guide img#book-cover {
    margin: 0 auto;
    display: block;
    margin-bottom: 25px;
    min-width: 100%;
}

div#test {

}

div#test-questions button.next {
	visibility: hidden;
}

div#test-questions.show-next button.next {
	visibility: visible;
}

div#test h3 {
	color: #009688;
    margin-bottom: 25px;
}

div#test label {
	font-size: 1rem;
}

div#test button {
	background: #004d40;
    color: #fff;
    border-radius: 999px;
    padding: 10px 25px;
    font-family: "Janna LT W20 Bold";
    margin-top: 25px;
    font-size: 1.5rem;
}

div#test button:hover {
	background: #009688;
}

div#result {
	text-align: center;
}

div#result p {
	text-align: center;
}

div#result h1 {
	color: #009688;
    text-transform: uppercase;
}

div#result a {
    text-transform: uppercase;
}

/* Footer */

div.footer {
    background: #424242;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: #fff;
    padding: 15px 0 10px 0;
    text-align: center;
}

/* Small only */
@media screen and (max-width: 39.9375em) {
    div.section {
        border-radius: 0;
        margin-bottom: 15px;
        padding-top: 55px;
    }
    div.content {
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 15px;
        padding: 20px 15px;
    }
    div.footer {
        border-radius: 0;
    }
	div.blog img, div.guide img, div.articles img {
    	max-width: 100%;
	}
    div.prev-next, div.prev-next p {
    	text-align: center;
    }
	div#test label {
    	display: block;
	}
}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    div.section {
        border-radius: 0;
        padding-top: 60px;
    }
    div.content {
        margin-left: 25px;
        margin-right: 25px;
    }
    div.footer {
        border-radius: 0;
    }
}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}