/*
Theme Name: IN/JA Academy
Theme URI: https://www.inja.academy/
Author: Hamid Shavarean
Version: 1.0
License: Copyright 2021, Hamid Shavarean Studio.
         License has issued for "IN/JA (The Middle of The Town) Institute for Culture & Art".

/* =Reset
-------------------------------------------------------------- */

@import 'css/reset.css';
@import 'css/responsive.gs.24col.css';
@import 'css/fonts.css';
@import 'css/font-awesome.min.css';

:root {
  --first: #114684;
  --second: white;
  --third: #262626;
  --fourth:gray;
}

/* Body */
body {
	cursor:default;
	background:var(--first);
	color:var(--third);
	font-family: 'NoeDisplay';
	margin:0;
	padding:0;
	overflow-x:hidden;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.fa-IR {
	font-family: 'web_Nazanin';
	direction:rtl;
}

::selection {
	color:var(--third);
	background:var(--second);
/* Safari */
}

::-moz-selection {
	color:var(--third);
	background:var(--second);
/* Firefox */
}

a {
	color:white;
	text-decoration:none;
}

a:hover {
	color:var(--second);
}

b, strong {
	font-weight:bold;
}

.container {
	padding:1.5em;
}

.wrapper {
	max-width:930px;
	margin:0 auto;
}

/* Header */

header .inja-tmott {
	display:flex;
	align-items:baseline;
}

header svg {
	fill:var(--second);
	display:block;
	width:100%;
	margin:0 auto;
    border: 2px solid var(--second);
    padding: 1.5em;
}

header #inja, header #the-middle-of-the-town {
	background: var(--third);
    padding:.25em;
}

header #the-middle-of-the-town {
	padding-left:0;
	margin-left:-.25em;
}

.fa-IR header #the-middle-of-the-town {
	padding-left:.25em;
	padding-right:0;
	margin-right:-.25em;
}

header #inja {
	width: 8em;
	height: 8em;
}

header #inja svg path {
	fill:var(--second);
	stroke:var(--second);
}

header #the-middle-of-the-town {
    max-width: 19em;
}

.fa-IR header #the-middle-of-the-town {
	max-width:12.25em;
}

header #the-middle-of-the-town svg {
	padding:.75em .5em .5em .5em;
	border-left:0;
}

.fa-IR header #the-middle-of-the-town svg {
	padding:.5em;
	border-right:0;
	border-left: 2px solid var(--second);
}


/* Body */
img.solo {
	width:100%;
	max-width:5.3rem;
	height:auto;
	margin:1rem .5rem;
}

.content, footer, .flower {
	background:var(--third);
	color:var(--second);
	padding:.25em;
	margin-top:-.625em;
	width: max-content;
	max-width:100%;
	display:flex;
}

.content .inside, footer .inside {
	border:2px solid var(--second);
	padding:.75em;
}

.content .inside a, footer .inside a, .contact .inside a {
	color:var(--second);
	font-weight:bold;
	text-decoration:underline;
}

.content .inside a:hover, footer .inside a:hover, .contact .inside a:hover {
	color:var(--first);
}

.content .inside.title {
	padding:.5em;
	padding-bottom:.25em;
}


.fa-IR .content .inside.title {
	padding-top: .3em;
    padding-bottom: .25em;
    font-weight:bold;
}

.content h1 {
	font-size:2em;
	text-transform:uppercase;
	font-weight:bold;
	line-height: 1em;
	padding:.1em 0 .1504em 0;
}

.fa-IR .content h1 {
	font-size:1.8em;
	line-height:1.4em;
}

.content p, .content span {
	display:block;
	margin-bottom:.5em;
	color:black;
}

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

.content a {
	display:inline-block;
}

.fa-IR .content h1 {
	direction:rtl;
	text-align:right;
}

.fa-IR .content .inside.title {
	display:flex;
	text-align:right;
}

.fa-IR .content .inside.title svg {
	height:2.5em;
	fill:var(--second);
}

.fa-IR .content p, .fa-IR .content span {
	direction:rtl;
	text-align:right;
	font-size:.9em;
}

.content .inside.attar {
	padding:0;
	width:23em;
}

.content .inside.attar div {
	position:relative;
}

.content .inside.attar svg {
	display:block;
	margin:0 auto;
	padding:.75em;
	fill:var(--second);
}

.content .inside.attar svg:first-child {
	height:3.33em;
}

.content .inside.attar svg.second-hemistich {
	height:3.2em;
}

.content .inside.attar svg:last-child {
	height: 1.2em;
    margin-top: -2em;
    position: absolute;
    border-top: 2px solid var(--second);
    border-right: 2px solid var(--second);
    padding: .25em;
    bottom: 0;
    left: 0;
}

@media only screen and (max-width: 390px) {
.content .inside.attar svg:first-child {
	height:3.1em;
}

.content .inside.attar svg.second-hemistich {
	height:3em;
}
}

@media only screen and (max-width: 320px) {
.content .inside.attar svg:first-child {
	height:2.7em;
}

.content .inside.attar svg.second-hemistich {
	height:2.6em;
}
}

.content .inside.attar .divider {
	width:100%;
	height:2px;
	background:var(--second);
}

.contact {
	width:100%;
	max-width:800px;
/* 	display:grid; */
	margin-top: -.62rem;
}

.contact .inside {
	background: var(--third);
    color: var(--second);
    padding: .25em;
    margin-top: -.625em;
    width: max-content;
    max-width: 100%;
    display: flex;
}

.contact .inside span {
	border:2px solid var(--second);
	padding:.75em;
	display:block;
}

.fa-IR .contact .inside span {
	direction:rtl;
	text-align:right;
	font-size:.9em;
}

.contact .inside span a {
	display:inline-block;
}

.contact .inside .whatsapp span {
	display:inline-block;
	font-family: 'NoeDisplay';
	border:0;
	padding:0;
	font-size:1em;
}

.fa-IR .contact .whatsapp {
	font-size:1em;
}
.contact span.inline {
	border-left:0;
}

.fa-IR .contact span.inline {
	border-left:2px solid var(--second);
	border-right:0;
}

#map-canvas {
	width:100%;
	height:300px;
}

.items-wrap {
	display:flex;
}

.items-wrap .item {
	margin-right:-.63em;
	margin-top:-.63em;
	transition:width .5s ease-in-out;
	
}

.fa-IR .items-wrap .item {
	margin-right:0;
	margin-left:-.63em;
}

.teacher, .book {
	position:relative;
}

.teacher:before, .book:before, .book-author:before, .inline-page .content.description:before {
	width: calc(100% - .5em);
    height: calc(100% - .5em);
	content:'';
	position:absolute;
	z-index:-1;
	-webkit-box-shadow: 0 0 0 .25em var(--third);
	box-shadow: 0 0 0 .25em var(--third);
}

.teacher, .book {
	padding:.25em;
	display:flex;
}

.teacher-name {
	background:var(--third);
}

.teacher-image, .book-image {
	padding:.25em;
	border:2px solid var(--second);
	background:var(--third);
}

.teacher-image img, .book-image img {
	width:100%;
	height:auto;
	display:block;
}

.teacher-name, .book-title {
	width: max-content;
	margin-top:-.63em;
}

.book-title {
	padding:.25em;
	background:var(--third);
}

.book-author {
	position:relative;
	width: max-content;
	margin-left:.25em;
	margin-top:-.38em;
	margin-bottom:.25em;
	background:var(--third);
}

.fa-IR .book-author {
	margin-left:0;
	margin-right:.25em;
	float:right;
}

.book-author:before, .inline-page .content.description:before {
	width:100%;
	height:100%;
}

.teacher h2 {
	position:absolute;
	font-size:.9em;
	font-weight:bold;
	color:var(--second);
	background:var(--third);
	padding:.4em .4em .2em .4em;
	bottom:4px;
	border:2px solid var(--second);
	max-width:calc(100% - .55em);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fa-IR .teacher h2, .fa-IR .book-title h2 {
	padding:.3em .4em;
	font-size:.8em;
}

.fa-IR .book-title h2 {
	font-size:.9em;
}

.book-title h2, .book-author span {
	font-size:.95em;
	padding:.4em .4em .2em .4em;
	border:2px solid var(--second);
	color:var(--second);
	font-weight:bold;
}

.book-author span {
	display:inline-block;
	font-size:.8em;
	font-weight:normal;
	padding:.3em .5em;
}

.items-wrap .item:hover h2, .item:hover span {
	background:var(--second);
	color:var(--third);
}

@media only screen and (max-width: 1250px) {
.items .span_3, .items .span_4 {
	width:17.5%;
}
}

@media only screen and (max-width: 960px) {
.items .span_3, .items .span_4 {
	width:21%;
}
}

@media only screen and (max-width: 768px) {
.items .span_3, .items .span_4 {
	width:25%;
}
}

@media only screen and (max-width: 635px) {
.items .span_3, .items .span_4 {
	width:51.7%;
}
}
.inline-page {
	display:flow-root;
}
.inline-page .content {
	display:block;
	float:left;
	direction:ltr;
}

.fa-IR .inline-page .content {
	float:right;
}

.inline-page .content.description {
	max-width:600px;
	position:relative;
	padding:0;
	background:none;
	margin-left: -.36em;
    margin-top: -.37em;
}

.fa-IR .inline-page .content.description {
	margin-left:0;
	margin-right:-.36em;
}

.inline-page .content.description .inside {
	background:var(--third);
}

.inline-page .content .inside.teacher-image {
	max-width:300px;
	padding:.25em;
}

@media only screen and (max-width: 950px) {
.inline-page .content .inside.teacher-image {
	max-width:210px;
}
.inline-page .content.description {
	width:100%;
	margin-left:.25em;
	margin-bottom:.25em;
}

.fa-IR .inline-page .content.description {
	margin-right:.25em;
}
}


/* Footer */

.flower {
	display:flex;
	align-items:center;
}

.flower svg {
	width:2.374em;
	height:2.374em;
	padding:.5em;
	border:2px solid var(--second);
}

.flower svg path {
	fill:var(--second);
}


footer {
	margin-top:-.625em;
	display:flex;
	flex-direction:column;
}

footer .inside {
	padding:.4367em .5em;
}

.fa-IR footer .inside {
	padding:.25em .45em;
}

.fa-IR footer {
	float:right;
}

footer span {
	font-size:.75em;
}

.content .inside .field {
	padding-left:.5em;
}

.content .inside .field.left {
	padding-left:0;
}


.content .inside .field img {
	width:100%;
	height:auto;
	margin:.5em 0 0 0;
}

.content .inside label {
	display:block;
	direction:rtl;
	text-align:right;
	font-size:.8rem;
	margin-top:1em;
	margin-bottom:.5rem;
	font-weight:bold;
	line-height:1.5rem;
}

.content .inside label.select-image {
	color:var(--fourth);
	margin-bottom:0;
}

.content .inside label.required:after {
	content:'*';
}

.content .inside label font {
	font-weight:normal;
	margin-right:.25em;
}

.content .inside label font.en {
	font-family: 'NoeDisplay';
	font-size:.9rem;
}

.content .inside label.pdf b {
	font-size:1rem;
	padding-left:.25rem;
}

.content .inside label.pdf b, p.counter {
	font-family: 'NoeDisplay';
	font-weight:bold !important;
}

.counter-wrapper {
	text-align:right;
}

p.counter, span.wcounts {
	display:inline-block;
	color:var(--fourth);

}


.content .inside .images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5rem;
    margin:1rem 0;
}

@media only screen and (max-width: 624px) {
.content .inside .images {
    grid-template-columns: repeat(2, 1fr);
}
}

.content .inside .images div {
	position:relative;
}

.content .inside .images div img {
	width:100%;
	height:auto;
	display:block;
}

.content .inside .images div .index {
	position:absolute;
	bottom:.5rem;
	left:50%;
	transform:translateX(-50%);
	text-align:center;
	font-weight:bold;
	background:var(--second);
	color:var(--third);
	border-radius:3rem;
	width:24px;
	height:24px;
	font-size:.65rem;
	display:flex;
	justify-content: center;
    align-items: center;
}

/* Chrome, Safari, Edge, Opera */
form input::-webkit-outer-spin-button,
form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.content .inside input, .content .inside select {
	width:100%;
	height:2.25em;
	padding:.5em;
	outline:none;
	border:1px solid var(--second);
	font-family: 'web_Nazanin';
	color:black;
	margin:.5em 0;
	direction:rtl;
	text-align:right;
	border-radius: 0;
}

.content .inside select {
	font-weight: bold;
    padding: 0.25rem 0.5rem;
    height: auto;
    color:var(--second);
}

.content .inside .portrait, .content .inside .aportrait {
	display:none;
	max-height:7.5em !important;
	width:auto !important;
	float: right;
    padding:.5em;
    border: 1px solid var(--second);
}

.content .inside input[type="file"] {
	border:0;
	font-family: 'NoeDisplay';
	height:3em;
	padding:.5em 0;
	color:var(--second);
}

.content .inside input[type="email"] {
	font-family: 'NoeDisplay';
	font-size:.83rem;
	padding:0 .5rem;
	direction:ltr;
	text-align:left;
}

.content .inside textarea {
	width:100%;
	padding:.5em;
	border:1px solid var(--second);
	font-family: 'web_Nazanin';
	font-size:.8rem;
	color:black;
	margin:.5em 0;	
	direction:rtl;
	text-align:right;
	border-radius: 0;
}

.content .inside .ss-s {
	height:300px;
	overflow-y:scroll;
	padding:1em;
	padding-top:.5em;
	border:1px solid var(--second);
	margin-top:.5em;
	background-color:#f9f9f9;
}

.content .inside .ss-s p {
	font-size:.82rem;
	color:var(--first);
	line-height:1.5rem;
	margin-bottom:1em;
}

.content .inside .ss-s sup {
	vertical-align: super;
	font-size:80%;
    margin-right:.25em;
}

.content .inside .ss-s hr {
	border:0;
	border-top:1px solid var(--first);
	margin-top:2em;
}

.content .inside .ipw {
	padding-left:.5em;
}

.content .inside .fpw {
	padding-right:.5em;
}

.content .inside .apply {
	width:100%;
	background:var(--third);
	cursor:pointer;
	outline:0;
	border:0;
	color:var(--second);
	border:2px solid var(--second);
	font-family: 'web_Nazanin';
	padding:.5em;
	font-size:.9rem;
	font-weight:bold;
}

.content .inside .apply:hover {
	background:var(--first);
	color:white;
}

.content .inside.form-title {
	font-size:.85rem !important;
}

.content p.error {
	color:var(--second);
}

@media only screen and (max-width: 635px) {
.content .inside .ipw, .content .inside .fpw {
	padding:0;
}

.content .inside .field {
	padding-left:0;
}

.content .inside .ipw .span_12, .content .inside .fpw .span_12, .content .inside .personal-info .first-name, .content .inside .personal-info .last-name {
	width:50%;
	padding-left:.25em;
}

.content .inside .ipw .span_12.left, .content .inside .fpw .span_12.left, .content .inside .personal-info .last-name.left {
	padding-left:0;
	padding-right:.25em;
}

.content .inside.title {
	font-size:.96em;
}
}


.lozad[data-loaded="true"], [data-loaded="true"] .lozad {
	animation-name: lozad;
	animation-duration: .3s;
	animation-timing-function:ease-in-out;
}
@keyframes lozad {
from {
	opacity: 0;
} to {
	opacity: 1; }
}

@media only screen and (max-width: 703px) {
	header .inja-tmott {
		align-items:flex-end;
	}
	header svg {
		padding:.8em;
	}
	header #inja {
		width:5em;
		height:5em;
	}
	header .inja-tmott #the-middle-of-the-town {
		max-width:13em;
		height:48px;
		padding-right:0;
	}
	
	.fa-IR header .inja-tmott #the-middle-of-the-town {
		max-width:10em;
		padding-left:.25em;
	}
	header #inja, header #the-middle-of-the-town {
		padding-bottom:.25em;
	}
	
	header .inja-tmott #the-middle-of-the-town svg {
		padding:.25em .5em;
		height:40px;
	}
}

@media only screen and (max-width: 320px) {
	header .inja-tmott #the-middle-of-the-town {
		max-width:10em;
	}
}

.content .inside.title.description {
	display:block;
	padding:.5rem;
}

.content .description p {
	color:var(--second);
	font-size:.85rem;
}

.content .description ul {
	list-style:disc;
	padding-right:.5rem;
	margin:0 .5rem 0 0;
}

.content .description ul li {
	direction:rtl;
	text-align:right;
	font-size:.85rem;
	margin-bottom:.5rem;
}

.content .description font {
	font-family: 'NoeDisplay';
}

.content .description a {
	background:var(--second);
	border:1px solid var(--second);
	color:white;
	padding:.15rem .35rem;
	margin:0 .25rem;
	text-decoration:none;
}

.content .description a:hover {
	background:none;
	color:var(--second);
}