@font-face {
 font-display: swap;
 font-family: source-sans-pro;
 font-style: normal;
 font-weight: 400;
 src: url(../index/sourcesanspro-regular.woff2) format("woff2")
}

@font-face {
 font-display: swap;
 font-family: source-sans-pro;
 font-style: normal;
 font-weight: 600;
 src: url(../index/sourcesanspro-semibold.woff2) format("woff2")
}
@font-face {
 font-display: swap;
 font-family: noto-serif;
 font-style: normal;
 font-weight: 700;
 src: url(../index/notoserif-bold.woff2) format("woff2");
}
@font-face {
 font-display: swap;
 font-family: noto-serif;
 font-style: normal;
 font-weight: 400;
 src: url(../index/notoserif-regular.woff2) format("woff2");
}
body, body * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
}
body{
 font-family: source-sans-pro, sans-serif;
}
a{
 text-decoration: none;
 color: inherit;
}
ul, ol{
 list-style: none;
}
header{
 color: #163860;
 border-bottom: 4px solid #163860;

}
.headerInner{
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 12px;

}
.headerTop{
 display: grid;
 align-items: center;
 grid-template-columns: 20% 1fr 20%;
 height: 40px;
 font-size: 12px;
}
.headerTop a{
 display: flex;
 align-items: center;
 font-weight: 600;
 gap: 4px;

}
.headerTopCenter{
 display: flex;
 align-items: center;
 justify-self: center;
 gap: 16px;
}
.headerTopRight{
 display: flex;
 align-items: center;
 gap: 16px;
 justify-self: flex-end;
}
.headerMid{
 display: flex;
 justify-content: center;
}
.headerLogo{
 display: flex;
 align-items: center;
 height: 101px;
 gap: 6px;
}
.headerLogo img{
 height: 51px;
}
.headerBot{
 display: flex;
 font-weight: 700;
 font-size: 14px;
 justify-content: center;
 align-items: center;
 height: 28px;
 padding-bottom: 8px;
 gap: 32px;
}
.headerBot {
 display: flex;
 align-items: center;
 white-space: nowrap;
 overflow-x: scroll;
 scrollbar-width: none;
}
.headerBot a{
 display: flex;
 align-items: center;
 gap: 4px;

}
.headerBot img{
 width: 12px;
 rotate: 90deg;
}
main{
 padding: 32px;
 width: 1000px;
 margin: 0 auto;
}
article{
 width: 616px;
 color: #163860;
}
.breadcrumbs{
 display: flex;
 align-items: center;
 gap: 4px;
 margin-bottom: 24px;
}
.breadcrumbs a{
 color: #727272;
 font-size: 14px;
 display: flex;
}
.breadcrumbs img{
 width: 12px;
}
h1{
 font-family: noto-serif, sans-serif;
 font-size: 20px;
 line-height: 1.35;
 margin-bottom: 16px;
}
.authorInfo{
 flex-direction: column;
 display: flex;
 font-size: 16px;
 color: #727272;
 gap: 6px;
 margin-bottom: 16px;
}
.articleMeta{
 display: flex;
 gap: 20px;
 align-items: center;
 margin-bottom: 24px;
}
.copyArticle{
 padding: 8px 12px;
 background: #f2f2f2;
 font-size: 14px;
 font-weight: 600;
 display: flex;
 align-items: center;
 border-radius: 80px;
}
.textContent{
 border-bottom: 1px solid #ececec;
 padding-bottom: 24px;
}
.textContent img, .textContent video{
 width: 100%;
 margin-bottom: 16px;
}
article p{
 font-size: 18px;
 margin-bottom: 16px;
 line-height: 1.5;
 font-family: noto-serif, sans-serif;
}
article h2{
 font-size: 20px;
 line-height: 1.4;
 margin-bottom: 16px;
 font-family: noto-serif, sans-serif;
}
article h2 a, article p a, article li a, h1 a{
 font-weight: 700;
 text-decoration: underline;
}
footer{
 background: #163860;
 color: #fff;
 padding-top: 20px;
 padding-bottom: 72px;
}
.footerInner{
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 12px;
}
.footerMain{
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding-bottom: 24px;
 border-bottom: 1px solid #476486;
 margin-bottom: 16px;
}
.footerUtils{
 color: #fff;
 border-right: 1px solid #476486;
}
.footerUtils h3{
 font-size: 16px;
 margin-bottom: 8px;
}
.footerUtils ul{
 padding-left: 4px;
}
.footerUtils li{
 display: flex;
 align-items: center;
 padding: 6px 0;
 gap: 10px;
}
.footerUtils a{
 font-size: 12px;
 font-weight: 700;
 line-height: .8;
}
.footerPaper{
 display: flex;
 padding-left: 32px;
 gap: 16px;
}
.paperInfo{
 color: #fff;
 display: flex;
 flex-direction: column;
}
.paperInfo h3{
 font-size: 16px;
 margin-bottom: 8px;
}
.paperInfo span{
 font-size: 12px;
 margin-bottom: 6px;
}
.paperButton{
 border: 1px solid #fff;
 border-radius: 4px;
 font-size: 12px;
 text-transform: uppercase;
 padding: 8px 16px;
}
.footerAbon {
 font-size: 12px;
 padding: 0 32px;
 border-right: 1px solid #476486;
}
.footerAbon h3{
 font-size: 16px;
}
.footerAbon a{
 font-weight: 700;
 display: flex;
 align-items: center;
 gap: 4px;
}
.footerAbon img{
 width: 16px;
}
.footerAbon p{
 margin: 6px 0;
}
.footerApps{
 padding-left: 32px;
 display: flex;
 flex-direction: column;
 font-size: 12px;
 gap: 24px;
}
.footerApps__app b{
 white-space: nowrap;
}
.footerApps h3{
 font-size: 16px;
}
.footerApps__app, .footerNews, .footerSocial{
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.footerApps__app a, .footerNews a{
 display: flex;
 align-items: center;
 gap: 8px;
}
.footerSocial__links{
 display: flex;
 gap: 12px;
}
.footerLinks{
 display: flex;
 flex-wrap: wrap;
 white-space: nowrap;
color: #fff;
 font-size: 12px;
 gap: 32px;
 font-weight: 700;
 justify-content: center;
 row-gap: 16px;
}
.botNav{
 position: fixed;
 bottom: 0;
 height: 55px;
 width: 100%;
 background: #fff;
 z-index: 10000;
 color: #163860;
}
.navProgress{
 background: #fff;
 z-index: 10000;
 width: 100%;
 height: 4px;
}
.navProgressBar{
 background: #163860;
 height: 100%;
 width: 0;
}
.navContent{
 border-top: 1px solid #ccc;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100%;
}
.navContent > * {
 padding: 0 24px;
 display: flex;
 align-items: center;
 height: 100%;
}
.navContent > *:not(:last-child){
 border-right: 1px solid #ccc;
}

.navSubscribe img{
 height: 24px;
}
.navContent > span{
 font-size: 14px;
 font-weight: 700;
 font-family: noto-serif, sans-serif;
}
.navSocial{
 gap: 32px;
}
.navComments{
 gap: 4px;
 font-size: 12px;
 font-weight: 700;
}
.navSubscribe{
 gap: 32px;
}
.navSubButton{
 background-color: #ecb62f;
 border-radius: 4px;
 color: #163860;
 padding: 9px 12px;
 font-size: 12px;
 font-weight: 700;
}
.largeHide{
 display: none;
}
.largeShow{
 display: flex;
}
.navComments span{
 display: flex;
 align-items: center;
 gap: 4px;
}
@media screen and (max-width: 1200px) {
 .headerLogo img{
  height: 44px;

 }
}

@media screen and (max-width: 1024px){
 .headerMid{
  display: none;
 }
 .largeHide{
  display: flex;
 }
 .largeShow{
  display: none;
 }
 .headerTopCenter{
  display: none;
 }
 .headerLogo{
  justify-self: center;
  height: 60px;
 }
 .headerLogo img{
  height: 28px;
 }
 .headerBot{
  margin-top: 24px;
  font-size: 16px;
 }
 .headerInner{
  padding: 0 24px;
 }
 header{
  border-bottom-width: 2px;
 }
 article{
  width: 100%;
 }
 main{
  width: 768px;
 }
 .footerApps{
  padding-left: 16px;
 }
 .footerAbon{
  padding: 0 16px;
 }
 .footerPaper{
  padding-left: 16px;
 }
 .navContent{
  padding: 0 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
 }
 .navContent > * {
  justify-self: center;
  border: none!important;
 }
 .navSubButton{
  width: max-content;
  line-height: 1;
  height: max-content;
 }
}
@media screen and (max-width: 768px) {
 .mobHide{
  display: none;
 }
 .headerBot{
  margin-top: 12px;
 }
 main{
  width: 100%;
  padding: 16px;
 }
 .articleMeta{
  overflow: hidden;
 }
 .headerInner{
 padding: 0 16px;
 }
 .footerMain{
  grid-template-columns: 1fr ;
 }
 .footerMain > *:not(:last-child){
  padding: 24px 0;
  border-bottom: 1px solid #476486;
  border-right: none;
  border-left: none;
 }
 .footerUtils ul{
  columns: 2;
 }
 .footerUtils ul li{
  width: 50%;
 }
 .footerUtils a{
  line-height: 1;
 }

}