/*
 * author: Roman Shprenger
 * template: a.k1 - Creative Portfolio & Blog HTML5 Template
 * version: v1.1
 * url: https: */
/**** FONTS ****/
@import url("https://fonts.googleapis.com/css?family=Oswald");
@import url("https://fonts.googleapis.com/css?family=Istok+Web");
/**** main titles on home page ****/
.home__welcome-title, .home__about-title, .home__blog-title, .home__contacts-title {
  font-family: "Oswald", sans-serif; }

/**** main title on project, blog, article and works pages ****/
.page__title {
  font-family: "Oswald", sans-serif; }

/**** label and count in comments ****/
.comments__label, .comments__count {
  font-family: "Oswald", sans-serif; }

/**** links in header ****/
.header a {
  font-family: "Oswald", sans-serif; }

/**** title of skills section on home page ****/
.home__about-skills-title {
  font-family: "Oswald", sans-serif; }

/**** headings in information about client on project page ****/
.project__client-heading {
  font-family: "Oswald", sans-serif; }

/**** social links ****/
.socials__link {
  font-family: "Oswald", sans-serif; }

/**** text in buttons ****/
.btn {
  font-family: "Oswald", sans-serif; }

/**** any text ****/
body, p {
  font-family: "Istok Web", sans-serif; }

/**** item of list ****/
ul.list li {
  font-family: "Istok Web", sans-serif; }

/**** title and date in preview of blog on home page ****/
.home__blog-preview-title, .home__blog-preview-date {
  font-family: "Istok Web", sans-serif; }

/**** title and date of article on blog page ****/
.blog__item-title, .blog__item-date {
  font-family: "Istok Web", sans-serif; }

/**** links, headings and text on project page ****/
.project__description-heading, .project__steps-heading {
  font-family: "Istok Web", sans-serif; }

.project__client-text, .project__description-text {
  font-family: "Istok Web", sans-serif; }

.project__link {
  font-family: "Istok Web", sans-serif; }

/**** blockquote, text, headings, date, count of comments under main title on article page ****/
.article__heading, .article__date, .article__stat {
  font-family: "Istok Web", sans-serif; }

.article__text p {
  font-family: "Istok Web", sans-serif; }

.article__quote blockquote {
  font-family: "Istok Web", sans-serif; }

/**** text and authors name of comment ****/
.comment__author, .comment__text {
  font-family: "Istok Web", sans-serif; }

/**** content and contact texts on home page ****/
.home__welcome-content, .home__about-content, .home__contacts-content {
  font-family: "Istok Web", sans-serif; }

.home__contacts-geo, .home__contacts-mail, .home__contacts-contacts {
  font-family: "Istok Web", sans-serif; }

.home__blog-preview-text {
  font-family: "Istok Web", sans-serif; }

/**** name of project in portfolio grid ****/
.portfolio__title {
  font-family: "Istok Web", sans-serif; }

/**** title and value of skill in about section of home page ****/
.skills__title, .skills__value {
  font-family: "Istok Web", sans-serif; }

/**** pagination ****/
.pagination__item {
  font-family: "Istok Web", sans-serif; }

/**** FONT COLORS ****/
/**** Colors of text and titles ****/
body {
  color: #414141; }

h1, h2 {
  color: #414141; }

h3 {
  color: #414141; }

h4 {
  color: #414141; }

h5 {
  color: #414141; }

p, small {
  color: #414141; }

/**** Colors of text in fields of forms ****/
input[type="text"], input[type="password"], input[type="email"], textarea {
  color: #414141; }

/**** Colors of button text ****/
.btn {
  color: #414141; }
  .btn:hover {
    color: #414141; }

/**** Colors of links on pages ****/
a {
  color: #414141; }
  a:hover {
    color: #414141; }

/**** Colors of links in header navigation ****/
.header__nav-link {
  color: #414141; }
  .header__nav-link:hover {
    color: #414141; }

/**** Colors of text (p) and links (a) in footer and in socials bar ****/
.footer p, .socials p {
  color: #414141; }

.footer a, .socials a {
  color: #414141; }
  .footer a:hover, .socials a:hover {
    color: #414141; }

/**** Color of preview short text in item of blog grid ****/
.blog__item-text {
  color: #414141; }

/**** Color of link in pagination ****/
.pagination__link {
  color: #414141; }

/**** BACKGROUND COLORS ****/
/**** main background ****/
body {
  background-color: #E8E8E8; }

/**** active item in pagination ****/
.pagination__item--active {
  background-color: #D6D6D6; }

/**** title of portfolio item ****/
.portfolio__item-title {
  background-color: #D6D6D6; }

/**** background of title in portfolio's grid item ****/
@media only screen and (min-width: 1280px) {
  .portfolio--grid .portfolio__item-title {
    background-color: #E8E8E8; } }

/**** client photo on project page ****/
.project__client-image {
  background-color: #D6D6D6; }

/**** section with form on project page ****/
.contact-preview {
  background-color: #D6D6D6; }

/**** dots of list item ****/
ul.list li:before {
  background-color: #414141; }

/**** button border ****/
.btn {
  border-color: #414141; }
  .btn:hover {
    border-color: #414141; }

/**** button border ****/
.header--scrolled {
  background: rgba(232, 232, 232, 0.9); }

/**** burger menu ****/
.header__nav {
  background-color: #E8E8E8; }

.header__burger span {
  background: #414141; }
  .header__burger span:before, .header__burger span:after {
    background: #414141; }

.header__burger:hover span {
  background: #414141; }
  .header__burger:hover span:before, .header__burger:hover span:after {
    background: #414141; }

/**** skills bars ****/
.skills__progress {
  border-bottom: 4px solid #CFCFCF; }
  .skills__progress span {
    border-bottom: 4px solid #414141; }

/**** count of comments ****/
.comments__count {
  background-color: #CFCFCF; }

/**** dash in footer ****/
.footer__dash:before {
  border-bottom-color: #CFCFCF; }

/**** background of fields on form ****/
.field__input, .field__textarea {
  background-color: #CFCFCF; }

/**** border of socials bar ****/
.socials {
  border-bottom-color: #CFCFCF; }

/**** gradient of footer ****/
.footer {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(232, 232, 232, 0)), color-stop(32%, rgba(232, 232, 232, 0.6)), color-stop(38%, rgba(232, 232, 232, 0.7)), color-stop(60%, rgba(232, 232, 232, 0.9)), color-stop(76%, #E8E8E8));
  background-image: -webkit-linear-gradient(top, rgba(232, 232, 232, 0) 0%, rgba(232, 232, 232, 0.6) 32%, rgba(232, 232, 232, 0.7) 38%, rgba(232, 232, 232, 0.9) 60%, #E8E8E8 76%);
  background-image: -moz-linear-gradient(top, rgba(232, 232, 232, 0) 0%, rgba(232, 232, 232, 0.6) 32%, rgba(232, 232, 232, 0.7) 38%, rgba(232, 232, 232, 0.9) 60%, #E8E8E8 76%);
  background-image: -o-linear-gradient(top, rgba(232, 232, 232, 0) 0%, rgba(232, 232, 232, 0.6) 32%, rgba(232, 232, 232, 0.7) 38%, rgba(232, 232, 232, 0.9) 60%, #E8E8E8 76%);
  background-image: linear-gradient(180deg, rgba(232, 232, 232, 0) 0%, rgba(232, 232, 232, 0.6) 32%, rgba(232, 232, 232, 0.7) 38%, rgba(232, 232, 232, 0.9) 60%, #E8E8E8 76%); }

/**** Write your custom styles at this file ****/

/* Image darkening */
.portfolio__item-img img,
.blog__item-img img,
.article__image img,
.article__slider img,
.project__img img,
.project__client-image img,
.home__about-figure img,
.home__blog-preview-img img {
  filter: brightness(0.85);
}