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

html {
    font-size: 62.5%;
}

body {
    font-family: sans-serif;
    font-size: 1.5em;
    font-weight: 400;
    color: #333;
    letter-spacing: .01em;
    line-height: 1.6;
}

.container {
    width: 100%;
    padding-right: 2rem;
    padding-left: 2rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 40rem) {
    .container {
        max-width: 40rem;
    }
}

@media (min-width: 80rem) {
    .container {
        max-width: 80rem;
    }
}

@media (min-width: 120rem) {
    .container {
        max-width: 112rem;
    }
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.col-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.col-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.col-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.offset-1 {
    margin-left: 8.333333%;
}

.offset-2 {
    margin-left: 16.666667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4 {
    margin-left: 33.333333%;
}

.offset-5 {
    margin-left: 41.666667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.333333%;
}

.offset-8 {
    margin-left: 66.666667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.333333%;
}

.offset-11 {
    margin-left: 91.666667%;
}

p {
    margin-top: 0;
}

b,
strong {
    font-weight: bold;
}

small {
    font-size: 80%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 2rem;
    font-weight: 300;
}

h1 {
    font-size: 4.0rem;
    line-height: 1.2;
    letter-spacing: -.1rem;
}

h2 {
    font-size: 3.6rem;
    line-height: 1.25;
    letter-spacing: -.1rem;
}

h3 {
    font-size: 3.0rem;
    line-height: 1.3;
    letter-spacing: -.1rem;
}

h4 {
    font-size: 2.4rem;
    line-height: 1.35;
    letter-spacing: -.08rem;
}

h5 {
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: -.05rem;
}

h6 {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0;
}

a {
    color: #333;
    text-decoration: none;
}

a:focus,
a:hover {
    color: #000;
    text-decoration: underline;
}

.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
    font-family: Vazir;
    display: inline-block;
    font-size: 1.1rem;
    cursor: pointer;
    height: 3.5rem;
    line-height: 3.5rem;
    padding: 0 3.0rem;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: .1rem;
    background-color: transparent;
    color: #333;
    border: 1px solid #eee;
}

.button:focus,
.button:hover,
button:focus,
button:hover,
input[type='button']:focus,
input[type='button']:hover,
input[type='reset']:focus,
input[type='reset']:hover,
input[type='submit']:focus,
input[type='submit']:hover {
    border-color: #000;
    color: #000;
    outline: 0;
}

.button[disabled],
button[disabled],
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
    cursor: default;
    opacity: .5;
}

.button[disabled]:hover,
.button[disabled]:focus,
button[disabled]:hover,
button[disabled]:focus,
input[type='button'][disabled]:hover,
input[type='button'][disabled]:focus,
input[type='reset'][disabled]:hover,
input[type='reset'][disabled]:focus,
input[type='submit'][disabled]:hover,
input[type='submit'][disabled]:focus {
    border-color: #eee;
    color: #333;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    background-color: transparent;
    border: 1px solid #eee;
    box-shadow: none;
    box-sizing: border-box;
    appearance: none;
    box-sizing: border-box;
    height: 3.8rem;
    padding: .6rem 1.0rem;
    width: 100%;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: #000;
    outline: 0;
}

textarea {
    min-height: 6.5rem;
}

label,
legend {
    display: block;
    margin-bottom: .5rem;
}

fieldset {
    padding: 0;
    border-width: 0;
}

input[type="checkbox"],
input[type="radio"] {
    display: inline;
}

.label-inline {
    display: inline-block;
    margin-left: .5rem;
}

ol,
ul,
dl {
    padding-left: 0;
    margin-top: 0;
}

ol ol,
ol ul,
ol dl,
ul ol,
ul ul,
ul dl,
dl ol,
dl ul,
dl dl {
    margin: 1.5rem 0 1.5rem 3rem;
    font-size: 90%;
}

ul {
    list-style: circle inside;
}

ol {
    list-style: decimal inside;
}

li {
    margin-bottom: 1rem;
}

th,
td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

th:first-child,
td:first-child {
    padding-left: 0;
}

th:last-child,
td:last-child {
    padding-right: 0;
}

button,
.button {
    margin-bottom: 1rem;
}

input,
textarea,
select,
fieldset,
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
    margin-bottom: 1.5rem;
}

.clearfix:after {
    clear: both;
    content: ' ';
    display: table;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.full-width {
    width: 100%;
}

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

hr {
    margin: 3.0rem 0;
    border-width: 0;
    border-top: 1px solid #eee;
}