body                                { color: #fff; background: #000 url(../img/bg-page.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; font-size: 22px; font-family: 'Roboto', sans-serif; position: relative; line-height: 1.4; }
body:after                          { content: ""; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: rgba(0,0,0,0.85); }

h1, h2, h3                          { font-family: 'Alice', serif; font-weight: normal; }
h1                                  { font-size: 46px; margin: 0 0 40px;}
h2                                  { font-size: 38px; }

a                                   { color: #fff; transition: color 0.3s; }
a:hover                             { color: #3d9eb2; }

.wrapper                            { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 0 20px; overflow-x: hidden; }

.page-header                        { padding: 60px 0; }
.page-header__row                   { display: flex; justify-content: center; }
.page-header__logo                  { padding: 0 60px; display: flex; align-items: center; justify-content: center; }
.page-header__logo img              { display: block; max-width: 100%; }
.page-header__text                  { display: flex; align-items: center; justify-content: center; }
.page-header__text p                { font-size: 46px; font-family: 'Alice', serif; text-align: center; }

.page-content                       { }
.panel                              { text-align: center; background: #3d9eb2; padding: 60px; border-radius: 10px;  }
.panel h1                           { }
.panel p                            { }

.btn                                { margin: 40px 0 0; }
.btn a                              { background: #333; color: #fff; display: inline-block; padding: 20px; line-height: 1; text-decoration: none; transition: background 0.4s, color 0.3s;; border-radius: 5px; }
.btn a:hover                        { background: #000; }

.categories                         { text-align: center; margin: 60px 0; }
.categories__row                    { display: flex; justify-content: center; margin: 0 -30px; }
.categories__item                   { width: 33.33%; padding: 0 30px; }
.categories__link                   { display: block; text-decoration: none; }
.categories__link:hover .categories__img img { transform: scale(1.2); }
.categories__img                    { overflow: hidden; border-radius: 50%; max-width: 250px; margin: 0 auto; }
.categories__img img                { display: block; max-width: 100%; transition: transform 0.5s;  }
.categories h2                      { margin: 30px 0 0; }

.page-footer                        {  }
.page-footer-top                    { border-top: 1px solid rgba(255,255,255,0.5); margin: 60px 0 40px; padding: 40px 0 0; }
.page-footer-top__row               { display: flex; }
.page-footer-top__item              { width: 50%; text-align: center; }
.page-footer-top h2                 { margin: 0 0 40px;}
.page-footer-top  address           { line-height: 1.6; font-style: normal; }
.page-footer-top__social            { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; }
.page-footer-top__social li         { padding: 0 20px; margin: 0; font-size: 42px; }

.page-footer-bottom                 { border-top: 1px solid rgba(255,255,255,0.5); margin: 60px 0 40px; padding: 40px 0 0; }
.page-footer-bottom__row            { display: flex; }
.page-footer-bottom__item           { width: 50%; }
.page-footer-bottom__item:last-child { text-align: right; }
.page-footer-bottom ul              { display: flex; list-style: none; padding: 0; margin: 0; }
.page-footer-bottom li              { padding: 0 20px; position: relative; }
.page-footer-bottom li:first-child  { padding-left: 0; }
.page-footer-bottom li:last-child:after { display: none; }
.page-footer-bottom li:after        { content: "|"; display: block; position: absolute; right: 0; top: 0; }
.page-footer-bottom p               { margin: 0; }

@media (max-width: 1060px) { 

body                                { font-size: 18px; }
h1                                  { font-size: 38px; }
h2                                  { font-size: 28px; }

.page-header__logo                  { padding: 0 40px; width: 160px; }
.page-header__text p                { font-size: 38px; }

}

@media (max-width: 800px) { 

body                                { font-size: 16px; }
h1                                  { font-size: 22px; margin: 0 0 20px; }
h2                                  { font-size: 20px; }

.page-header                        { padding: 40px 0; }
.page-header__logo                  { padding: 0 40px; width: 80px; }
.page-header__text p                { font-size: 16px; }

.panel                              { padding: 40px 20px; }

.btn                                { margin: 20px 0 0; }
.btn a                              { padding: 10px; font-size: 14px;  }

.categories                         { margin: 40px 0; }
.categories__row                    { margin: 0 -10px; }
.categories__item                   { padding: 0 10px; }
.categories h2                      { margin: 10px 0 0; }

.page-footer-top                    { margin: 40px 0; padding: 40px 0 0; }
.page-footer-top__row               { flex-direction: column; }
.page-footer-top__item              { width: 100%; }
.page-footer-top h2                 { margin: 0 0 20px; }
.page-footer-top__social li         { font-size: 32px; }

.page-footer-bottom                 { margin: 40px 0; }
.page-footer-bottom__row            { flex-direction: column; }
.page-footer-bottom__item           { width: auto; font-size: 14px; }
.page-footer-bottom__item:last-child { text-align: center; }
.page-footer-bottom ul              { justify-content: center;  margin: 0 0 20px; }
.page-footer-bottom li              { font-size: 14px; }


}