html, body { padding: 0; margin: 0; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat.ttf') format('ttf'), url('fonts/Montserrat.otf') format('otf'), url('fonts/Montserrat.woff') format('woff'), url('fonts/Montserrat.woff2') format('woff2'), url('fonts/Montserrat.eot') format('eot'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto.ttf') format('ttf'), url('fonts/Roboto.otf') format('otf'), url('fonts/Roboto.woff') format('woff'), url('fonts/Roboto.woff2') format('woff2'), url('fonts/Roboto.eot') format('eot'); font-weight: normal; font-style: normal; font-display: swap; } html { scroll-behavior: smooth; } body { font-family: 'Roboto'; } #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10; } #popup { width: 100%; display: none; position: fixed; z-index: 11; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; /* Учитываем padding в размерах */ } .popup_wrapper { box-shadow: 0 2px 10px rgba(0,0,0,0.3); background: #0b2a3c; padding: 40px 0; color: #fff; } .popup_wrapper h3 { text-align: center; margin: 0 0 30px 0; } .popup_wrapper input, .popup_wrapper textarea { font-size: 16px; padding: 5px; width: 100%; margin: 0 0 5px 0; outline: none; border: none; } .popup_wrapper textarea { height: 70px; resize: none; overflow: hidden; } .popup_wrapper_left { text-align: right; padding: 2px 0 0 0; } .popup_wrapper input#popup_send { font-weight: 600; outline: none; border: none; color: #fff; padding: 10px; width: 50%; margin: 15px 0 0 0; display: block; background: #00669c; cursor: pointer; } .popup_wrapper input#popup_send:hover { background: #fff; color: #00669c; outline: none; } .popup_wrapper #closePopup { cursor: pointer; width: 30px; height: 30px; position: absolute; top: -30px; right: 11px; } .popup_wrapper #closePopup:before, .popup_wrapper #closePopup:after { content: ""; position: absolute; top: 12px; left: 3px; width: 25px; height: 5px; background: #fff; } .popup_wrapper #closePopup:before { transform: rotate(45deg); } .popup_wrapper #closePopup:after { transform: rotate(-45deg); } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat'; margin: 0; /*letter-spacing: 1px;*/ } iframe { border: none; } ul { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; cursor: pointer; display: inline-block; } header { background: #00669c; position: fixed; z-index: 5; width: 100%; color: #fff; padding: 14px 0; border-bottom: 2px solid #fff; } header a { color: #fff; } header menu { display: flex; flex-direction: row; justify-content: space-between; margin: 15px 0 0 0; padding: 0; align-items: end; height: 100%; font-size: 16px; } header menu ul { display: block; } header menu ul li { display: inline-block; border-bottom: 10px solid transparent; text-align: center; padding: 0 20px 13px 20px; } header menu ul li a { } header menu ul.translate li { padding: 0 5px 13px 5px; } header menu ul li:hover { border-bottom: 10px solid #fff; } header menu ul.translate li:nth-child(2) { border: none; } section#first_screen { padding: 100px 0 0 0; width: 100%; background-image: url('img/first_screen.jpg'); height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 2; position: relative; } section#first_screen:before, section#solutions:before, section#projects:before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color:rgba(0, 0, 0, .5); } section#first_screen .first_screen_wrapper { position: relative; z-index: 3; } h1, h2.white { color: #fff; } h1 { margin: 150px 0 50px 0; font-size: 55px; } section#about .about_upper { background: #fff; padding: 220px 0 70px; } section#first_screen h2 { margin: 0 0 130px 0; } section#first_screen .link_block_wrapper { color: #fff; display: flex; flex-direction: column; align-content: center; text-align: center; padding: 20px; border: 2px solid transparent; } section#first_screen .link_block_wrapper:hover { border: 2px solid #fff; } section#first_screen .link_block_img { margin-bottom :30px; height: 120px; display: flex; flex-direction: row; justify-content: center; align-items: center; } section#first_screen .link_block_text { font-size: 15px; } section#about h2 { margin: 0 0 90px 0; font-size: 50px; } section#about .about_img img { width: 96%; } section#about .about_lower { padding: 90px 0; width: 100%; background: #0b2a3c; color: #fff; } section#about .about_lower_caption { font-weight: 700; margin-bottom: 30px; text-align: center; position: relative; display: block; } section#about .about_lower_caption.first:after { content: ''; position: absolute; right: 0; top: 0; border: 8px solid transparent; border-left: 8px solid #fff; } section#about .about_lower_caption.last:before { content: ''; position: absolute; left: 0; top: 0; border: 8px solid transparent; border-left: 8px solid #fff; } section#solutions { padding: 275px 0 0 0; width: 100%; background-image: url('img/solutions_background.jpg'); background-position: top; background-repeat: no-repeat; background-size: cover; z-index: 2; position: relative; } section#solutions .solutions_upper { width: 100%; z-index: 3; } section#solutions h2 { margin: 0 0 20px 0; font-size: 50px; } section#solutions .solutions_lower { background: #fff; z-index: 3; position: relative; padding: 20px 0 70px 0; } section#solutions ul.ui-tabs-nav li a { display: block; } #soltabs ul { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 75px; } #soltabs ul li { position: relative; } #soltabs ul.tab_menu li a { font-size: 16px; font-weight: 600; color: #000; padding: 10px; } #soltabs ul.tab_menu li:first-child a { padding-left: 0; } #soltabs ul.tab_menu li:last-child a { padding-right: 0; } #soltabs ul.tab_menu li:hover a { color: #00669c; } #soltabs ul.tab_menu li.ui-state-active:before, #soltabs ul li.ui-tabs-tab:hover:before { position: absolute; width: 17px; height: 17px; background: #00669c; content: ''; top: 12px; left: -25px; } #soltabs ul.tab_menu li.sol_separator { width: 2px; background: #00669c; height: 20px; top: 12px; } .soltab_caption { font-weight: 600; color: #000; font-size: 24px; } .soltab_text { margin-top: 50px; } .soltab_gallery { margin-top: 15px; } .soltab_gallery a { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; height: 160px; } .soltab_gallery a:hover img { scale: 0.9; transition: 0.2s; } .soltab_gallery a img { object-fit: cover; width: 100%; height: 160px; transition: 0.2s; } section#projects { padding: 275px 0 125px 0; width: 100%; background-image: url('img/projects_background.jpg'); background-position: top; background-repeat: no-repeat; background-size: cover; z-index: 2; position: relative; } section#projects h2 { margin: 0 0 20px 0; font-size: 50px; } section#projects .projects_gallery { margin: 0; } section#projects .project_img_wrapper { padding: 0; /*height: 292.5px;*/ } section#projects .project_img_wrapper a { width: 100%; } section#projects .project_img_wrapper a:hover img { scale: 0.9; transition: 0.2s; } section#projects .project_img_wrapper img { object-fit: cover; height: 277.5px; width: 100%; transition: 0.2s; } section#contacts { padding: 220px 0 250px 0; } section#contacts h2 { margin: 0 0 80px 0; font-size: 50px; } section#contacts .contacts_info { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } section#contacts .contacts_info .contact_text, section#contacts .contacts_info #openPopup { display: block; } section#contacts .contacts_info span { color: #00669c; font-weight: 600; margin: 30px 0 20px 0; display: block; } section#contacts .contacts_info span:first-child { margin: 0 0 20px 0; } section#contacts .contacts_info a { color: #000; font-weight: 600; } section#contacts .contacts_info a:hover { color: #00669c; } section#contacts .contacts_info #openPopup { border: 2px solid #00669c; background: #00669c; color: #fff; outline: none; font-weight: 600; cursor: pointer; padding: 10px 0; } section#contacts .contacts_info #openPopup:hover { background: #fff; color: #00669c; } footer { background: #f6f6f6; padding: 15px 0; }