/* MISC */ .wrapper{ width:100%; max-width:1200px; margin:0px auto; } #main_cover{ width:100%; height:100vh; position:absolute; inset:0; z-index:1; background:transparent url('../img/main_page/cover.jpg') center top no-repeat; background-size:cover; &:after{ content:""; position:absolute; inset:0; /*background: linear-gradient(180deg, transparent 0%, transparent 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.4) 100%);*/ background: linear-gradient(to top, rgba(0,0,0, .7) 0%, rgba(0,0,0, 0) 55%,rgba(0,0,0, 0) 75%, rgba(0,0,0, .7) 115%); } } .btn-blue{ height:46px; display:flex; color:#fff; background:var(--blue_color); font-size:14px; font-weight:500; padding:0px 1.5rem; border:0; cursor:pointer; text-decoration:none; transition:all 0.5s linear; text-shadow:none; box-shadow: 0 2px 8px rgba(75,131,242,0.27); &:hover{ text-shadow:-1px -1px 1px #1a4190; background:var(--blue_color); } } .btn-gray{ height:46px; display:flex; color:#757575; background:#eaeaea; font-size:13px; font-weight:500; padding:0px 1.5rem; border:0; cursor:pointer; text-decoration:none; transition:all 0.5s linear; &:hover{ background:#e2e2e2; } } /* MAIN HEADER */ header{ width:100%; text-align:center; position:sticky; top:0; z-index:20; padding:1rem 0px; backdrop-filter: blur(5px); /*background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); box-shadow: 0px 3px 10px rgba(0,0,0,0.1);*/ .wrapper{ height:64px; display:flex; justify-content:stretch; align-items:center; gap:10px; } #main_logo{ display:flex; justify-content:start; height:100%; text-decoration:none; img{ height:100%; width:auto; } } #header_navigation{ list-style:none; display:flex; gap:10px; a{ font-weight:500; font-size:1rem; color:#fff; text-shadow:1px 1px 1px #000000; } li{ height:100%; display:flex; padding:0px 10px; position:relative; ul{ display:none; flex-flow:column; justify-content:start; align-items:start; background:#fff; position:absolute; top:99%; left:0px;z-index:11; box-shadow:4px 4px 16px rgba(0,0,0,0.5); li{ width:100%; min-height:40px; display:flex; justify-content:start; align-items:start; a{ display:flex; width:100%; height:100%; justify-content:start; align-items:center; padding:0.5rem 1rem; white-space:nowrap; text-align:left; text-shadow:none; color:#555; } &:hover{ background:#dedede; } } } &:hover ul{ display:flex; } } } .actions{ height:100%; display:flex; justify-content:end; gap:10px; button{ width:28px; height:28px; display:flex; background:transparent; border:0; i{ font-size:1.5rem; color:#fff; text-shadow:1px 1px 1px #000000; } } } } /* WHITE HEADER */ /* MAIN PAGE */ main{ width:100%; flex-grow:1; flex-shrink:1; background:rgb(246, 246, 246); padding:1rem 0 75px 0; #slider{ width:100%; height:calc( 100vh - 100px ); position:relative; display:flex; justify-content:stretch; align-items:flex-end; padding-bottom:60px; z-index:2; .wrapper{ display:flex; justify-content:stretch; align-items:flex-end; } h1{ max-width:600px; font-size:48px; line-height:1.5em; font-weight:700; color:#fff; display:flex; justify-content:flex-start; text-align:left; text-shadow:1px 1px 1px #000; } h2{ font-size:24px; line-height:1.5em; font-weight:700; color:#fff; text-shadow:1px 1px 1px #000; text-align:left; } .actions{ display:flex; flex-flow:column; justify-content:flex-end; align-items:flex-start; gap:1rem; } } #theses{ margin:50px 0px; .wrapper{ display:flex; justify-content:stretch; align-items:stretch; gap:2.66%; } .thesesItem{ flex-grow:1; flex-shrink:1; max-width:23%; border:solid 0px #000; display:flex; flex-flow:column; justify-content:start; align-items:center; gap:1rem; padding:1.5rem; background:#fff; transition:all 0.5s linear; position:relative; .img{ width:100%; height:64px; display:flex; margin:0; padding:0; } img{ height:100%; } h3{ width:100%; font-size:17px; line-height:1.5em; font-weight:700; color:#000; text-align:center; } span{ font-size:15px; line-height:1.5em; color:rgb(90, 90, 90); } &:hover{ box-shadow: rgba(0,0,0, .12) 0 35px 90px; } } } #last_pub{ background:#fff; .wrapper{ display:flex; flex-flow:column; justify-content:start; align-items:stretch; gap:1rem; h2{ font-size:31px; line-height:1.5em; font-weight:700; text-align:center; } article{ width:100%; } } .grid { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(4, 1fr); gap:1rem; grid-template-areas: "item1 item1 item2 item3" "item4 item5 item5 item6"; perspective:500px; .item { background:transparent url('') center center no-repeat; background-size:cover; padding:1.5rem; color: white; position:relative; display:flex; flex-flow:column; justify-content:stretch; align-items:start; min-height:340px; transition: all 0.3s linear; backface-visibility: hidden; transform: rotateY(-0deg); &:after{ content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0, .7) 0%, rgba(0,0,0, 0) 55%,rgba(0,0,0, 0) 75%, rgba(0,0,0, .7) 115%); opacity:0.5; transition:all 0.5s linear; z-index:1; } .date{ font-size:13px; font-weight:500; line-height:1.3em; color:#fff; text-align:left; position:relative; z-index:2; } .name{ font-size:17px; font-weight:700; line-height:1.3em; color:#fff; text-align:left; position:relative; z-index:2; } &:hover:after{ opacity:1; } } .item:nth-child(1) { grid-area: item1; .name{ font-size:23px; } } .item:nth-child(2) { grid-area: item2; } .item:nth-child(3) { grid-area: item3; } .item:nth-child(4) { grid-area: item4; } .item:nth-child(5) { grid-area: item5; .name{ font-size:23px; } } .item:nth-child(6) { grid-area: item6; } } } #orgs{ background:#fff; padding-bottom:100px; h2{ font-size:38px; line-height:1.5em; font-weight:700; text-align:center; padding:2rem 0; } .grid{ background:rgb(228, 229, 229); display: grid; grid-template-rows: repeat(5, 1fr); grid-template-columns: repeat(4, 1fr); gap: 1px; .item{ min-width:24%; height:126px; display:flex; flex-grow:1; flex-shrink:1; background:#fff; img{ height:50px; filter:grayscale(100); transition:all 0.5s linear; } &:hover{ img{ filter:none; } } } } } } /* NEWS BLOCK */ main#newsblock{ padding:0px 0px 75px 0px; .breadcrumbs{ width:100%; display:flex; flex-flow:wrap; justify-content:flex-start; align-items:center; gap:10px; text-align:left; .item{ color:rgba(255,255,255,0.6 ); font-size:13px; font-weight:500; } a{ color:rgba(255,255,255,0.6 ); font-size:13px; font-weight:500; transition:all 0.3s linear; &:hover{ color:rgba(255,255,255,1); } } i{ color:rgba(255,255,255,0.6 ); font-size:13px; font-weight:500;} } h1{ width:100%; font-size:42px; line-height:1em; margin:36px auto 0 auto; font-weight:700; color:#fff; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:center; text-align:left; } } #blue_line{ min-height:245px; width:100%; background:var(--blue_color); padding-top:45px; padding-bottom:55px; } .newsblock{ width:100%; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; gap:40px 0px; margin:-40px 0px 40px 0px; .item{ width:32%; display:flex; flex-flow:column; justify-content:flex-start; align-items:stretch; gap:10px; background:#fff; box-shadow: 0 1px 1px rgba(0,0,0, .12); padding-bottom:20px; transition:all 0.5s linear; .img{ width:100%; aspect-ratio:16/9; img{ width:100%; height:100%; object-fit:cover; } } span{ color:#bbb; text-align:left; font-size:11px; font-weight:500; padding:0px 1rem; } h3{ font-size:17px; font-weight:500; color:#212121; line-height:1.3em; text-align:left; padding:0px 1rem; height:70px; overflow:hidden; } &:hover{ box-shadow: rgba(0,0,0, .09) 0 35px 90px; h3{ text-decoration:underline; } } } } .news_actions{ width:100%; margin-bottom:100px; text-align:center; display:flex; } .competentions{ .item{ .img{ display:flex; img{ height:70%; width:auto; } } h3{ text-align:center; } p{ text-align:center; color:#212121; font-size:15px; line-height:1.6em; &.new{ font-weight:bold; color:#007236; } &.regional{ font-weight:bold; color:#ee1d24; } } .btn-blue{ margin:2rem 1rem 0 1rem; } } .item:hover h3{ text-decoration:none; } } /* SINGLE POST */ .singlepost{ background:#fff; padding:36px 40px; margin:-40px 0px 0px 0px; box-shadow: 0 1px 1px rgba(0,0,0, .12); display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start; gap:2rem; .date{ display:flex; flex-flow:row nowrap; justify-content:start; align-items:center; gap:10px; font-weight:500; font-size:13px; color:#616161; } .img{ width:100%; aspect-ratio:16/9; img{ width:100%; height:100%; object-fit:cover; } } h2{ color:#000; text-align:left; font-size:23px; font-weight:700; line-height:1.35em; } h4{ color:#000; text-align:left; font-size:15px; font-weight:700; line-height:1.6em; } p{ text-align:left; line-height:1.6em; color:#131720; font-size:15px; &.italic{ font-style:italic; } } q{ padding:2rem 2rem 2rem 5rem; font-style:italic; background:#f6f6f6; position:relative; font-size:15px; line-height:1.6em; margin:0px 2rem; text-align:left; &:before{ position:absolute; top:25px; left:25px; color:#EF6C00; content:"\201C"; font-size:92px; line-height:1em; font-style:normal; font-family:"Arial", sans-serif; text-align:left; color:var(--blue_color); } } a{ text-align:left; line-height:1.6em; color:var(--blue_color); font-size:15px; text-decoration:underline; } ul{ padding:0px; margin:0px; text-align:left; } li{ text-align:left; line-height:1.6em; color:#131720; font-size:15px; list-style: disc inside; } } section.docs{ background:#fff; padding:36px 40px; box-shadow: 0 1px 1px rgba(0,0,0, .12); display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start; gap:2rem; .docline{ display:flex; flex-flow:row nowrap; justify-content:start; align-items:center; gap:1rem; .icon{ width:52px; height:69px; background:#3070B0; color:#fff; display:flex; flex-flow:column; justify-content:end; align-items:center; text-transform: uppercase; font-size:13px; font-weight:500; position:relative; &:before{ position:absolute; top:0; left:0; border-top:20pxsolid #fff; border-right:20px solid #fff; content:""; } &:after{ position: absolute; top:0px; left:0px; border-bottom: 20px solid #154B9F; border-left:20px solid transparent; /*rorder-right: 20px solid #154B9F; border-top:20px solid transparent;*/ content:""; } } .info{ display:flex; flex-flow:column; justify-content:start; align-items:start; gap:0; a{ font-size:15px; font-weight:500; color:#067ec3; text-align:left; text-decoration:underline; } span{ text-align:left; font-size:13px; color:#b1b1b1; } } } } /* SIDEMENU && EXPERTS */ .sidemenu{ display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:start; gap:1rem; aside{ width:280px; height:auto; flex-grow:0; flex-shrink:0; padding-top:40px; ul{ width:100%; display:flex; flex-flow:column; justify-content:start; align-items:stretch; gap:0; padding:0; li{ width:100%; min-height:46px; a{ width:100%; height:100%; display:flex; flex-flow:row nowrap; justify-content:start; align-items:center; cursor:pointer; padding:10px 20px; color:#555; font-weight:500; font-size:15px;text-align: left; } &:hover{ background:#eaeaea; } &.active{ background:#e2e2e2; } } } .sections_wrapper{ flex-grow:1; flex-shrink:1; display:flex; flex-flow:column; justify-content:start; align-items:stretch; gap:40px; } } .cardsblock{ flex-grow:1; flex-shrink:1; display:flex; flex-flow:column; justify-content:start; align-items:stretch; gap:30px 0; margin-top:-40px; .items_wrapper{ flex-grow:1; flex-shrink:1; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:cetart; gap:30px 0; } .item{ width:32%; aspect-ratio:275/305; background:#555 url('') center center no-repeat; background-size:cover; padding:30px; color:#fff; position:relative; display:flex; flex-flow:column; justify-content:flex-end; align-items:flex-start; gap:5px; &:before{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0, .0), rgba(0,0,0, .7)); transition:all 0.2s linear; } &.opener{ background:#555; justify-content:flex-start; &:before{ display:none; } } span{ text-align:left; font-size:13px; line-height:1.3em; color:rgba(255,255,255,0.7); position:relative; transition:all 0.2s linear; } h3{ font-weight:700; font-size:23px; line-height:1.3em; color:#fff; text-align:left; position:relative; transition:all 0.2s linear; } h4{ font-weight:700; font-size:17px; line-height:1.3em; color:#fff; text-align:left; position:relative; transition:all 0.2s linear; } &:hover:before{ opacity:0.5; } &:hover{ text-shadow:1px 1px 1px #000; } } } } /* HISTORY ITEMS (COLUMN SECTIONS) */ .sections_wrapper{ flex-grow:1; flex-shrink:1; display:flex; flex-flow:column; justify-content:start; align-items:stretch; gap:40px; margin-top:-40px; .history_item{ background:#fff; padding:36px 40px; box-shadow:0 1px 1px rgba(0,0,0,0.12); display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:flex-start; gap:1rem; &.high{ align-items:stretch; gap:2rem; } } h2{ text-align:center; padding:0px 1rem; color:var(--blue_color); display: inline-block; width:20%; font-size:30px; font-weight:700; } p{ flex-grow:1; flex-shrink:1; text-align:left; color:#000; font-size:15px; line-height:1.6em; } .avatar{ height:100%; display:flex; flex-flow:column; justify-content:center; align-items:center; .img{ width:100px; aspect-ratio:1; border-radius:50%; background:var(--blue_color) url('') center center no-repeat; background-size:cover; } } .info{ flex-grow:1; flex-shrink:1; display:flex; flex-flow:column; justify-content:start; align-items:start; } .history_header{ display:flex; flex-flow:row nowrap; justify-content:start; align-items:center; gap:1rem; margin-bottom:2rem; .name{ text-align:left; font-size:19px; line-height:1.3em; font-weight:700; color:#000; } .profession{ font-size:11px; line-height:1em; color:#fff; font-weight:500; border-radius:2px; padding:6px 11px; background:var(--blue_color); } .date{ color:#212121; font-weight:500; font-size:13px; line-height:1em; opacity:0.4; } } .description{ display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:start; gap:1rem; } .quote{ color:var(--blue_color); font-size:30px; line-height:1em; } .data{ flex-grow:1; flex-shrink:1; display:flex; flex-flow:column; justify-content:start; align-items:start; gap:0.5rem; } } /* PAGINATOR */ .paginator{ display:flex; flex-flow:row nowrap; justify-content:flex-start;align-items:center; gap:1rem; li{ height:38px; aspect-ratio:1; display:flex; flex-flow:rownowrap; justify-content:center; align-items:center; gap:0.5rem; border-radius: 2px; cursor:pointer; a{ width:100%; height:100%; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; gap:05rem; color:#757575; font-weight:500; font-size:15px; transition:all 0.25s ease; text-transform:uppercase; } span{ color:#757575; font-weight:500; font-size:15px; flex-grow:1; flex-shrink:1; transition:all 0.25s ease; text-transform:uppercase; } i{ font-size:24px; olor:#757575; } &:hover{ a{ color:var(--blue_color); } span{ color:var(--blue_color); } } } li.button{ width:auto; text-transform:uppercase; background:#E0E0E0; jusify-content:stretch; &.inactive{ opacity:0.5; } a{ padding:0px 1rem; width:auto; color:#e0e0e0; } } li.active{ background:#555; color:#fff; a{ color:#fff; } span{ color:#fff; } } } /* АКОРДЕОНЫ */ .accordion_block{ display:flex; flex-flow:column; justify-content:start; align-items:start; gap:1rem; width:100%; details{ background:#f6f6f6; box-shadow:-5px -5px 5px rgb(255, 255, 255), 1px 1px 1px rgb(189, 189, 189, 0.57); border-radius: 10px; color: #212121; font-size: 15px; width:100%; transition:all 0.5s ease; summary{ padding:1rem 1.5rem 1rem 2rem; border-bottom: 1px solid #e2e8f0; color: #212121; font-size: 15px; font-weight:bold; text-align:left; cursor:pointer; } p{ color: #212121; font-size: 15px; background:#fff; text-align:left; padding:2rem 1.5rem; border-radius:0px 0px 10px 10px; transition:all 0.5s ease; } } } /* FOOTER */ footer{ width:100%; text-align:center; background:#fff; padding:100px 0; .wrapper{ display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:start; .footerBlock{ width:20%; display:flex; flex-flow:column; justify-content:flex-start; align-items:start; gap:1rem; } .copyrights{ text-align:left; font-size:13px; line-height:1.3em; font-weight:400; color:#b5b5b5; } .footerCopyright a{ font-size:13px; line-height:1.3em; color:#555; text-decoration:underline; font-weight:500; text-align:left; &:hover{ text-decoration:none; } } .footerContacts{ div{ text-align:left; display:flex; flex-flow:column; justify-content:start; align-items:start; } span{ font-weight:700; font-size:15px; line-height:1.6em; color:#555; text-align:left; } a{ color:#555; font-size:15px; line-height:1.6em; } } .footerMenu{ a{ color:#555; text-decoration:none; text-align:left; font-size:15px;font-weight:700; line-height:1.3em; &:hover{ color:var(--blue_color); } } } .footerSocial{ display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:start; gap:1rem; img{ height:24px; opacity:0.5; filter: invert(100%); -webkit-filter: invert(100%); &:hover{ opacity:1; } } } } } @media screen( max-width:1200px ){ /*паддинги хэдэру и футеру */ wrapper: padding:0px 1rem; } @media screen( max-width:1100px ){ меняем хэдэр } */