/* =============================================
   Базовые цвета и фон
   ============================================= */

body,
a,
.footer .section-one .info ul li:first-child {
    color: #222;
}

body {
    background: #f7f7f5;
}

/* =============================================
   Элементы с белым фоном / текстом
   ============================================= */

.open-nav i,
.open-nav i:before,
.open-nav i:after,
.cta-primary {
    background: #222;
}

.blog-post .open-nav i,
.blog-post .open-nav i:before,
.blog-post .open-nav i:after,
.blog-post .related-posts div {
    background: #fff;
}

.close-nav,
.mobile-nav nav ul li a,
.contact-form input[type=submit],
.cta-primary,
.blog-post .header a,
.blog-post .quote blockquote {
    color: #fff;
}

/* =============================================
   Оттенки серого
   ============================================= */

.footer .section-one .info ul li,
.footer .section-one .info ul li a,
.footer .get-in-touch p,
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-info p {
    color: #444;
}

.blog-item .title a:hover,
.related-posts .title a:hover {
    color: #555;
}

.blog-post .author,
.blog-post .post-img figcaption {
    color: #666;
}

nav a:hover,
.footer .section-one .info ul li a:hover,
.social-media li a:hover,
.next-project a:hover,
.blog-post .comment .publication-date {
    color: #777;
}

/* =============================================
   Акцентные цвета (оранжевый)
   ============================================= */

.works-item .category,
.blog-item .category,
.blog-post .category,
.contact h2,
.contact-us h2,
.blog-post .comment .reply,
.cta-secondary:hover {
    color: #ff4b23;
}

.contact-form input[type=submit],
.cta-primary:hover {
    background: #ff4b23;
}

/* =============================================
   Фоны и блоки с акцентным цветом
   ============================================= */

.thumbnail-wrapper,
.mobile-nav,
.blog-post .quote blockquote {
    background: #fd6d4d;
}

/* =============================================
   Синий акцент
   ============================================= */

.blog-post .comment .reply:hover {
    color: #0c3fbf;
}

.contact-form input[type=submit]:hover {
    background: #0c3fbf;
}

/* =============================================
   Светлые акценты при наведении
   ============================================= */

.blog-post header a:hover {
    color: #fed0c5;
}