@charset "utf-8";
/* CSS Document */

@import 'https://fonts.googleapis.com/css?family=Exo+2:300,400,500,600,700&subset=cyrillic'; 

:root
{
--indigo:#1b75bc;
--litindigo:#385078;
--cyan:#77ccff;
--green:#00d035;
--darkcyan:#4499cc;
--maxigrey:#ececec;
--grey:#555555;
--dark:#3d3f42;
--white:#ffffff;
}

* {font-family:"Exo 2", sans-serif; transition:0.3s;}
:after, :before {transition:0.3s;}
body {margin:0px; background-color:var(--maxigrey);}
header {border-bottom:1px solid #e4e4e4; height:195px;}
section {padding:64px 0px;}
footer {padding:64px 0px; background-color:var(--dark);}
p, li, td {color:var(--grey); font-size:20px; font-weight:300;}
h1, h2 {font-size:48px; font-weight:300; color:var(--indigo); text-transform:uppercase;}
h2 {text-align:center;}
img {max-width:100%;}
strong {font-weight:600;}
section.dark {background-color:var(--dark);}
section.white {background-color:var(--white);}
section li {margin:0px 0px 16px; list-style-image:url(/pic/ico-li.svg);}

.wrap {width:1200px; margin:auto;}
.dual {display:flex; flex-wrap:wrap; width:100%; justify-content:space-around; align-items:center;}
.dual > div {width:50%;}
.dual > div img {display:block; margin:auto; max-width:80%;}

.parallax {background-image:url(/pic/parallax.png); background-attachment: fixed; background-position: top right; background-repeat: no-repeat; background-size: cover;}
.parallax-base {padding:48px; background-color:var(--white); border-radius:48px;}


.top-panel .wrap {display:flex; justify-content: space-between;}
.logo {width:600px;}
.top-panel nav {width:595px;}
.top-phone {width:5px;}
nav ul {display:flex; width: 100%; justify-content: space-between; list-style:none; padding:0px; margin:150px 0px 0px;}
nav li a {font-size: 18px; font-weight: 700; letter-spacing:1px; text-transform: uppercase; color:#151515; text-decoration:none;}
nav li a:hover {color:var(--cyan);}
.logo {padding:20px 0px 20px 0px; display:flex;}
.logo span {width:240px;}
.logo span:first-child {width:200px; margin-right:30px; padding:3px 0px 0px;}
.logo span b {display: block; height:38px; color: var(--litindigo); font-weight:500; letter-spacing:2px; font-size:32px; line-height:32px; text-transform:uppercase;}
.logo span b i {font-style:normal; font-weight:700; color:var(--darkcyan);}
.top-phone {position:relative; padding-top:20px;}
.top-phone div {position:absolute; right:0px; width:180px; text-align:right;}
.top-phone div:nth-child(1) {width: 24px; margin-right:390px;}
.top-phone div:nth-child(2) {margin-right:200px;}
.top-phone div span {display:none;}
.top-phone div a {color:var(--litindigo); font-size:16px; letter-spacing:1px; font-weight:400; text-decoration:none;}
.top-phone div a:hover {color:var(--darkcyan);}

.scrolled {background-color:var(--white); height:64px; padding:8px 0px; position:fixed; width:100%; z-index:10; box-shadow:0px 2px 5px #bbbbbb;}
.scrolled .logo {width:200px;}
.scrolled .top-panel nav {width:670px;}
.scrolled .top-phone {width:200px; height: 20px;}
.scrolled nav ul {height:24px; padding:20px 0px; margin:0px;}
.scrolled .logo {padding:0px; display:flex;}
.scrolled .logo span {width:80px; padding:0px;}
.scrolled .logo span:first-child {width:80px; margin-right:20px; padding:0px;}
.scrolled .logo span b {height:15px; font-size:12px; line-height:15px; text-transform:uppercase;}
.scrolled .top-phone div {position:absolute; right:0px; width:20px; text-align:right;}
.scrolled .top-phone div:nth-child(1) {margin-right:100px;}
.scrolled .top-phone div:nth-child(2) {margin-right:50px;}
.scrolled .top-phone div span {display:block; width:20px; height:20px;}
.scrolled .top-phone div > a {display: none; position: absolute; right: -44px; width: 160px; padding: 7px 8px 9px; border-radius: 18px; border: 1px solid #ececec; text-align: center; background-color: var(--white);}
.scrolled .top-phone div:hover > a {display:block;}
.scrolled .top-phone div:nth-child(1)  > a  {display: none;}

.footer-contacts {display:flex; width:100%; justify-content:space-around; align-items:start;}
.footer-contacts > div {width:40%;}
.footer-contacts h3, .footer-contacts h4 {font-size:20px; font-weight:300; text-transform:uppercase; color:var(--darkcyan); margin:0px 0px 10px;}
.footer-contacts p {margin:0px 0px 24px; font-size:16px; font-weight:400; color:var(--white); line-height:26px;}
.footer-contacts p a {color:var(--white);}
.footer-contacts input {font-size:18px; height:24px; width:232px; padding:4px; border:1px solid #777777; background-color:#555555; outline:none; color:var(--maxigrey);}
.footer-contacts button {width:32px; height:32px; border:0px; vertical-align:middle; margin:-6px 0px 0px 16px; border-radius:16px; background-color:transparent; background-image:url(/pic/ico-ff.svg); background-size:100%; cursor:pointer;}
.footer-contacts button:hover {background-color:var(--white);}
.footer-phones {text-align:right;}

.cases-block {display:flex; flex-wrap:wrap; justify-content:center; align-items:start;}
.case-elem {width:480px; height:360px; margin:0px 40px 80px; position:relative; background-color:var(--white);  overflow:hidden; cursor:pointer;  border-radius:32px;}
.case-elem-img {width:100%; height:100%; filter:brightness(0.6);}
.case-elem-img img {width:100%; height:100%; object-fit: cover; border-radius:32px;}
.case-elem-more a {display:block; position:absolute; left:0px; top:0px; width:calc(100% - 80px); height:calc(100% - 80px); padding:40px; text-decoration:none; text-align:right; opacity:0;}
.case-elem-more a:hover {opacity:1;}
.case-elem-more a strong {display:inline-block; height:16px; padding:8px 24px; font-size:14px; text-transform:uppercase; text-decoration:none; font-weight:500; color:var(--white); background-color:var(--indigo); border-radius:16px;}
.case-elem-more a:hover strong {background-color:var(--cyan);}
.case-elem-h1 {position:absolute; top:180px; left:40px; right:40px; font-size:32px; color:var(--white); text-shadow:0px 0px 5px #000000;}
.case-elem-h1:after {content:""; display:block; margin-top:22px; width:80px; height:2px; background-color:var(--white);}
.case-elem-desc {position:absolute; top:270px; left:40px; right:40px; font-size:16px; color:var(--white); text-shadow:0px 0px 5px #000000;}
.case-elem:hover .case-elem-img {filter:brightness(0.5);}

.pf-block {display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:start; margin:0px 0px 50px;}
.pf-elem {width:280px; height:210px; position:relative; background-color:var(--white);  overflow:hidden; cursor:pointer; border:1px solid #cccccc; border-radius:16px;}
.pf-elem-img {width:100%; height:100%;}
.pf-elem-img img {width:100%; height:100%; object-fit: cover;}
.pf-elem:hover .pf-elem-img {transform:scale(1.2);}
.pf-elem-zoom a {display:block; position:absolute; left:0px; top:0px; width:calc(100% - 240px); height:calc(100% - 170px); padding:85px 120px; text-decoration:none; background-color:rgba(119,204,255,0.4); text-align:right; opacity:0;}
.pf-elem-zoom a:hover {opacity:1;}
.pf-elem-title {position:absolute; top:130px; left:0px; right:0px; padding:10px 20px; font-size:16px; color:var(--white); background-color:rgba(0,0,0,0.7);}
.pf-elem:hover .case-elem-img {filter:brightness(0.5);}

.price-block {display:flex; flex-wrap:wrap; justify-content:space-around; align-items:start; margin:0px 0px 50px;}
.price-elem {width:220px; height:350px; position:relative; padding:20px; margin-bottom:20px; background-color:var(--white); border:1px solid #cccccc; border-radius:24px; box-shadow:1px 1px 7px #bbbbbb;}
.price-elem-ico {position:absolute; width:120px; height:120px; top:-7px; right:-7px;}
.price-elem-ico img {width:100%; height:100%; object-fit: cover;}
.price-elem-desc {height:180px; font-size:16px; font-weight:300;}
.price-elem-desc:before {content:""; display:block; float:right; width:45px; height:35px;}
.price-elem-title {height:60px; font-size:24px;}
.price-elem-cost {height:80px; font-size:32px; color:var(--3d3f42); text-align:center;}
.price-elem-cost:before {content:""; display:inline-block; width:120px; height:1px; margin:0px 0px 12px; background-color:var(--cyan);}
.price-elem-cost em {display:block; font-size:14px; font-style:normal; text-align:center;}
.price-elem-cost strong {display:block; font-size:24px; color:var(--litindigo); text-align:center; font-weight:500;}

.portfolio-elem {height:300px; padding:30px 0px; border-top:1px solid #e0e0e0;}
.pf-image {float:left; width:400px; padding:0px 40px 0px 0px;}
.portfolio-elem:nth-child(2n) .pf-image {float:right; padding:0px 0px 0px 40px;}
.pf-desc h3 {margin:0px 0px 16px; font-size:18px; color:#131313;}
.pf-desc p {font-size:16px; margin:16px 0px;}
.pf-desc p a {color:var(--darkcyan);}
.pf-desc p a:hover {color:var(--litindigo);}
.pf-desc p.pr-cmnt {margin:4px 0px;}
.pf-desc p.pr-cmnt span {display:block; text-align:center; padding:0px; font-size:14px; color:#181818; font-weight:500;}
.pf-desc p.pr-wayout {display:block; margin:0px; text-align:center; font-size:14px; color:#181818; font-weight:500;}
.pf-desc p.pr-cmnt span.pf-type1 {color:#007000;}
.pf-desc p.pr-cmnt span.pf-type2 {color:#225599;}
.pf-desc p.pr-cmnt span.pf-type3 {color:#990099;}
.pf-desc p.pr-cmnt span.pf-type4 {color:#990000;}
.pf-image img:hover {transform:scale(1.5);}

.prefer-block {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start;}
.prefer-elem {width:22%;}
.prefer-elem-num {display:inline-block; margin-right:40px; font-size:100px; font-weight:400; color:var(--litindigo); vertical-align:middle;}
.prefer-elem-ico {display:inline-block; width:80px; height:64px; vertical-align:middle; text-align:center;}
.prefer-elem-ico img {height:100%;}
.prefer-elem-h1 {font-size:24px; font-weight:300; margin:16px 0px 30px; text-transform:uppercase; color:var(--white); letter-spacing:1px;}
.prefer-elem-desc {font-size:14px; color:var(--maxigrey); line-height:20px; letter-spacing:0.5px;}

.knowmore a {display:inline-block; color:var(--cyan); vertical-align:middle; text-decoration:none;}
.knowmore a:before {content:""; display:inline-block; vertical-align:middle; width:24px; height:24px; margin-right:24px; margin-top:-4px; background-image:url(/pic/ico-ff.svg); background-size:100%;}
.knowmore a:hover {color:var(--litindigo);}
.knowmore a:hover:before {margin-right:48px;}
.viewmore a {display:inline-block; padding:8px 24px 12px; text-decoration:none; font-size:20px; font-weight:500; line-height:20px; text-transform:lowercase; letter-spacing:1px; border:1px solid var(--darkcyan); color:var(--darkcyan); border-radius:21px;}
.viewmore a:hover {color:var(--white); background-color:var(--litindigo);}

*.citate {font-size: 24px; font-weight: 400;}
.centered {text-align:center;}
.r-float {float:right; margin:0px 0px 40px 40px;}

.burger {display:none; width:24px; height:16px; padding:16px; background:url(/pic/burger.svg) center center no-repeat; background-size:24px 24px;}



@media (max-width:1279px)
{
.wrap {width:960px;}
header {height:195px;}
p, li, td {font-size:18px;}
h1, h2 {font-size:40px;}

.logo {width:480px;}
.top-panel nav {width:480px;}
nav ul {margin:135px 0px 0px;}
nav li {margin:0px 24px 0px 0px;}
nav li a {font-size:16px;}
.logo span {width:180px; padding-top:8px;}
.logo span:first-child {width:180px;}
.logo span b {height:32px; font-size:30px; line-height:30px;}

.case-elem {width:400px; height:300px;}
.case-elem-h1 {top:120px; font-size: 26px;}
.case-elem-desc {top:200px;}

.prefer-elem-num {margin-right: 20px; font-size: 80px;}
.prefer-elem-h1 {font-size: 20px;}
.prefer-elem-desc {font-size: 12px;}

.pf-elem {width: 220px; height: 160px;}
.pf-elem-title {top: 90px; font-size: 14px;}
.pf-image {width: 320px; height: 300px;}
.pf-desc p {font-size: 14px;}
.pf-image img:hover {transform:scale(1.875);}

}

@media (max-width:979px)
{
section {padding:40px 10px;}
header {height:64px;}
footer {padding:40px 10px;}
.wrap {width:100%;}
h1, h2 {font-size:28px;}
p, li, td {font-size:16px;}

.burger {display:block; margin:auto;}
nav ul {display:none; position:absolute; padding:20px; background-color:var(--white); width: calc(100% - 300px); min-width:160px;}
nav ul li {display:block; margin:0px 0px 16px;}
.burger:hover + ul, nav ul:hover, .scrolled .burger:hover + ul, .scrolled nav ul:hover {display:block; margin:0px 0px 0px -120px;}
.scrolled nav ul {display:none; height:auto; position:absolute; padding:20px; background-color:var(--white);}

.top-panel nav, .scrolled top-panel nav {width:calc(100% - 280px);}
.top-panel, .scrolled top-panel {background-color:var(--white); height:48px; padding:8px 10px; position:fixed; width:100%; z-index:10; box-shadow:0px 2px 5px #bbbbbb;}
.logo, .scrolled .logo {width:140px; padding:0px; display:flex;}
.logo span, .scrolled .logo span {width:60px; padding:0px;}
.logo span:first-child, .scrolled .logo span:first-child {width:60px; margin-right:20px; padding:0px;}
.logo span b, .scrolled .logo span b {height:11px; font-size:12px; line-height:12px;}
.top-phone, .scrolled .top-phone {position: absolute; right: 100px; padding-top:15px; width:120px;}
.top-phone div, .scrolled .top-phone div {position: absolute; right: 0px; width: 20px; text-align: right;}
.top-phone div:nth-child(1), .scrolled .top-phone div:nth-child(1) {width: 20px; margin-right:80px;}
.top-phone div:nth-child(2), .scrolled .top-phone div:nth-child(2) {margin-right:40px;}
.top-phone div span, .scrolled .top-phone div span {display:block; width:20px; height:20px;}
.top-phone div > a, .scrolled .top-phone div > a {display: none; position: absolute; right: -16px; width: 160px; padding: 7px 8px 9px; border-radius: 18px; border: 1px solid #ececec; text-align: center; background-color: var(--white);}
.top-phone div:hover > a, .scrolled .top-phone div:hover > a {display:block;}
.top-phone div:nth-child(1)  > a, .scrolled .top-phone div:nth-child(1)  > a  {display: none;}

.dual > div {width:100%;}
.case-elem {width:320px; height:240px; margin:0px 0px 20px;}
.cases-block {justify-content: space-around;}
.case-elem-h1 {top:100px; font-size:20px;}
.case-elem-desc {top:160px; font-size:12px;}
.prefer-elem {width:320px;}

.pf-block {justify-content: space-around;}

.footer-contacts {flex-wrap:wrap;}
.footer-contacts > div {width:100%;}
.footer-phones {text-align:left;}

.pf-image {float:none; width:100%; max-width:400px; padding:0px;}
.pf-image img:hover {transform:scale(1);}
.portfolio-elem {height:auto;}

.parallax-base {padding: 24px;}
}