/* @author Oleg Krasnov (krasnov@artlebedev.ru) @created 2018.03.22 @copyright Art. Lebedev Studio (http://www.artlebedev.ru/) This source code follows Formatting section of Google CSS Style Guide https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules */ /* @author Alexander Samilyak (aleksam241@gmail.com) @created 2013.03.25 @copyright Art. Lebedev Studio (www.artlebedev.ru) This source code follows Formatting section of Google CSS Style Guide https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules */ /** @param {string} value @param {boolean=} important @return {string} */ /** Clearfix in float based layouts */ /** @param {color} hexOrName @param {boolean=} important */ /** Pure css triangle */ body { overflow-x: hidden; } .img_horizontal { display: inline-block; } .img_vertical, .img_vertical_eng, .img_horizontal_eng { display: none; } .vertical .img_horizontal { display: none; } .vertical .img_vertical { display: inline-block; } .english .img_vertical, .english .img_vertical_eng, .english .img_horizontal { display: none; } .english .img_horizontal_eng { display: inline-block; } .english.vertical .img_horizontal, .english.vertical .img_horizontal_eng { display: none; } .english.vertical .img_vertical_eng { display: inline-block; } .english.vertical .logo_sizes ul li:first-child .size, .english.vertical .logo_sizes ul li:first-child .ruler { margin-left: 10px; } .english.vertical .logo_sizes ul li:nth-child(2) .size, .english.vertical .logo_sizes ul li:nth-child(2) .ruler { margin-left: 5px; } .section { font-size: 16px; margin-bottom: 60px; } .vision-impaired .section { font-size: 17px; } .section:last-of-type { margin-bottom: 0; } .section .accent_block { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .section .accent_block .ico-warning { color: #ab0000; display: block; font-size: 48px; margin: 0 0 15px; } .section h2 { font-size: 28px; } .vision-impaired .section h2 { font-size: 33px; } .section h3 { font-size: 24px; } .vision-impaired .section h3 { font-size: 26px; } .section h4 { font-size: 21px; } .vision-impaired .section h4 { font-size: 22px; } .section img { height: auto; max-width: 100%; } .section .download ul li { color: #999; font-size: 14px; margin: 0; } .section .download ul li a { border: none; color: #999; } .vision-impaired .section .download ul li { color: #696969; font-size: 16px; } .section .download ul li > div { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 7px 10px; } .section .download ul li > div:hover { background: #f5f5f5; cursor: pointer; } .section .download ul li > div:hover .ext { color: #ab0100; margin: 0 7px; } .section .download ul li .ext { color: #ab0100; font-size: 12px; margin: 0 7px; } .vision-impaired .section .download ul li .ext { font-size: 16px; } .section .row { margin-bottom: 1px; position: relative; } .section .row:after { content: ''; display: table; clear: both; } .section .row .column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; } .section .row .column:nth-child(1) { padding-right: 5px; } .section .row .column:nth-child(2) { padding-left: 5px; } .section .row:last-child { margin-bottom: 0; } .section.first { margin-bottom: 30px; } #content .section.first .settings { font-size: 13px; } #content .section.first .settings:after { content: ''; display: table; clear: both; } .vision-impaired #content .section.first .settings { font-size: 16px; } #content .section.first .settings .setting { float: left; line-height: 35px; margin-bottom: 5px; min-height: 35px; white-space: nowrap; } #content .section.first .settings .setting > div { display: inline-block; vertical-align: middle; } #content .section.first .settings .setting > div.label { padding-right: 15px; } #content .section.first .settings .setting ul.switcher.type3 { font-size: 12px; margin: 0; } .vision-impaired #content .section.first .settings .setting ul.switcher.type3 { font-size: 14px; } #content .section.first .settings .setting ul.switcher.type3 li { padding: 5px 10px; } #content .section.first .settings .setting ul.switcher.type3 li span { color: #999; } #content .section.first .settings .setting ul.horizontal li { font-size: 12px; margin: 0; padding: 0; } #content .section.first .settings .setting .delimiter:before { border-left: 1px solid #e1e1e1; content: ''; display: block; height: 26px; margin: 0 12px; width: 1px; } #content .section.first .settings .setting .delimiter:before:last-of-type { margin-right: 0; } .section.second { height: 570px; margin-bottom: 30px; position: relative; text-align: center; } .section.second:before { content: ''; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: background-color ease-in 0.25s; -o-transition: background-color ease-in 0.25s; -moz-transition: background-color ease-in 0.25s; transition: background-color ease-in 0.25s; width: 100%; z-index: -1; } .dark .section.second:before { background: #74777b; } .blue .section.second:before { background: #0082bb; } .blue .section.second .icon-short, .blue .section.second .icon-short:before, .blue .section.second .icon-short-vertical, .blue .section.second .icon-short-vertical:before, .blue .section.second .download li span, .blue .section.second .download li span:before, .dark .section.second .icon-short, .dark .section.second .icon-short:before, .dark .section.second .icon-short-vertical, .dark .section.second .icon-short-vertical:before, .dark .section.second .download li span, .dark .section.second .download li span:before { color: #fff; } .blue .section.second .download li div, .dark .section.second .download li div { background: rgba(245, 245, 245, 0.2); } .blue .section.second .download li div:hover, .dark .section.second .download li div:hover { background: #f5f5f5; color: #595959; } .blue .section.second .download li div:hover span, .dark .section.second .download li div:hover span { color: #999; } .blue .section.second .download li div:hover span.ico-download:before, .dark .section.second .download li div:hover span.ico-download:before { color: #595959; } .section.second .icon-short, .section.second .icon-short-vertical { color: #595959; left: 50%; padding-bottom: 60px; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity ease-in 0.05s; -o-transition: opacity ease-in 0.05s; -moz-transition: opacity ease-in 0.05s; transition: opacity ease-in 0.05s; } .vision-impaired .section.second .icon-short, .vision-impaired .section.second .icon-short-vertical { color: #000; } .section.second .icon-short.ico-logo-short, .section.second .icon-short-vertical.ico-logo-short { font-size: 180px; opacity: 1; } .vertical .section.second .icon-short.ico-logo-short, .diameter_10 .section.second .icon-short.ico-logo-short, .diameter_6 .section.second .icon-short.ico-logo-short, .english .section.second .icon-short.ico-logo-short, .vertical .section.second .icon-short-vertical.ico-logo-short, .diameter_10 .section.second .icon-short-vertical.ico-logo-short, .diameter_6 .section.second .icon-short-vertical.ico-logo-short, .english .section.second .icon-short-vertical.ico-logo-short { opacity: 0; } .section.second .icon-short.ico-logo-eng-short, .section.second .icon-short-vertical.ico-logo-eng-short { font-size: 180px; opacity: 0; } .english .section.second .icon-short.ico-logo-eng-short, .english .section.second .icon-short-vertical.ico-logo-eng-short { opacity: 1; } .vertical .section.second .icon-short.ico-logo-eng-short, .diameter_10 .section.second .icon-short.ico-logo-eng-short, .diameter_6 .section.second .icon-short.ico-logo-eng-short, .vertical .section.second .icon-short-vertical.ico-logo-eng-short, .diameter_10 .section.second .icon-short-vertical.ico-logo-eng-short, .diameter_6 .section.second .icon-short-vertical.ico-logo-eng-short { opacity: 0; } .section.second .icon-short.ico-logo-short-10mm, .section.second .icon-short-vertical.ico-logo-short-10mm { font-size: 105px; opacity: 0; } .diameter_10 .section.second .icon-short.ico-logo-short-10mm, .diameter_10 .section.second .icon-short-vertical.ico-logo-short-10mm { opacity: 1; } .vertical .section.second .icon-short.ico-logo-short-10mm, .english .section.second .icon-short.ico-logo-short-10mm, .vertical .section.second .icon-short-vertical.ico-logo-short-10mm, .english .section.second .icon-short-vertical.ico-logo-short-10mm { opacity: 0; } .section.second .icon-short.ico-logo-eng-short-10mm, .section.second .icon-short-vertical.ico-logo-eng-short-10mm { font-size: 105px; opacity: 0; } .diameter_10.english .section.second .icon-short.ico-logo-eng-short-10mm, .diameter_10.english .section.second .icon-short-vertical.ico-logo-eng-short-10mm { opacity: 1; } .vertical.diameter_10.english .section.second .icon-short.ico-logo-eng-short-10mm, .vertical.diameter_10.english .section.second .icon-short-vertical.ico-logo-eng-short-10mm { opacity: 0; } .section.second .icon-short.ico-logo-short-6mm, .section.second .icon-short-vertical.ico-logo-short-6mm { font-size: 55px; opacity: 0; } .diameter_6 .section.second .icon-short.ico-logo-short-6mm, .diameter_6 .section.second .icon-short-vertical.ico-logo-short-6mm { opacity: 1; } .vertical .section.second .icon-short.ico-logo-short-6mm, .english .section.second .icon-short.ico-logo-short-6mm, .vertical .section.second .icon-short-vertical.ico-logo-short-6mm, .english .section.second .icon-short-vertical.ico-logo-short-6mm { opacity: 0; } .section.second .icon-short.ico-logo-eng-short-6mm, .section.second .icon-short-vertical.ico-logo-eng-short-6mm { font-size: 55px; opacity: 0; } .vertical.diameter_6.english .section.second .icon-short.ico-logo-eng-short-6mm, .vertical.diameter_6.english .section.second .icon-short-vertical.ico-logo-eng-short-6mm { opacity: 0; } .diameter_6.english .section.second .icon-short.ico-logo-eng-short-6mm, .diameter_6.english .section.second .icon-short-vertical.ico-logo-eng-short-6mm { opacity: 1; } .section.second .icon-short.ico-logo-short-vertical-6mm, .section.second .icon-short-vertical.ico-logo-short-vertical-6mm { font-size: 90px; opacity: 0; } .vertical.diameter_6 .section.second .icon-short.ico-logo-short-vertical-6mm, .vertical.diameter_6 .section.second .icon-short-vertical.ico-logo-short-vertical-6mm { opacity: 1; } .vertical.english.diameter_6 .section.second .icon-short.ico-logo-short-vertical-6mm, .vertical.english.diameter_6 .section.second .icon-short-vertical.ico-logo-short-vertical-6mm { opacity: 0; } .section.second .icon-short.ico-logo-eng-short-vertical-6mm, .section.second .icon-short-vertical.ico-logo-eng-short-vertical-6mm { font-size: 90px; opacity: 0; } .vertical.english.diameter_6 .section.second .icon-short.ico-logo-eng-short-vertical-6mm, .vertical.english.diameter_6 .section.second .icon-short-vertical.ico-logo-eng-short-vertical-6mm { opacity: 1; } .section.second .icon-short.logo-short-vertical, .section.second .icon-short-vertical.logo-short-vertical { opacity: 0; } .vertical .section.second .icon-short.logo-short-vertical, .vertical .section.second .icon-short-vertical.logo-short-vertical { opacity: 1; } .vision-impaired .vertical .section.second .icon-short.logo-short-vertical, .vertical.blue .section.second .icon-short.logo-short-vertical, .vertical.dark .section.second .icon-short.logo-short-vertical, .diameter_6 .section.second .icon-short.logo-short-vertical, .diameter_10 .section.second .icon-short.logo-short-vertical, .english .section.second .icon-short.logo-short-vertical, .vision-impaired .vertical .section.second .icon-short-vertical.logo-short-vertical, .vertical.blue .section.second .icon-short-vertical.logo-short-vertical, .vertical.dark .section.second .icon-short-vertical.logo-short-vertical, .diameter_6 .section.second .icon-short-vertical.logo-short-vertical, .diameter_10 .section.second .icon-short-vertical.logo-short-vertical, .english .section.second .icon-short-vertical.logo-short-vertical { opacity: 0; } .section.second .icon-short.logo-short-vertical-black, .section.second .icon-short-vertical.logo-short-vertical-black { opacity: 0; } .vision-impaired .vertical .section.second .icon-short.logo-short-vertical-black, .vision-impaired .vertical .section.second .icon-short-vertical.logo-short-vertical-black { opacity: 1; } .vision-impaired .blue.vertical .section.second .icon-short.logo-short-vertical-black, .vision-impaired .dark.vertical .section.second .icon-short.logo-short-vertical-black, .vision-impaired .vertical.english .section.second .icon-short.logo-short-vertical-black, .vision-impaired .blue.vertical .section.second .icon-short-vertical.logo-short-vertical-black, .vision-impaired .dark.vertical .section.second .icon-short-vertical.logo-short-vertical-black, .vision-impaired .vertical.english .section.second .icon-short-vertical.logo-short-vertical-black { opacity: 0; } .section.second .icon-short.logo-eng-short-vertical-black, .section.second .icon-short-vertical.logo-eng-short-vertical-black { opacity: 0; } .vision-impaired .vertical.english .section.second .icon-short.logo-eng-short-vertical-black, .vision-impaired .vertical.english .section.second .icon-short-vertical.logo-eng-short-vertical-black { opacity: 1; } .vision-impaired .blue.vertical .section.second .icon-short.logo-eng-short-vertical-black, .vision-impaired .dark.vertical .section.second .icon-short.logo-eng-short-vertical-black, .vision-impaired .blue.vertical .section.second .icon-short-vertical.logo-eng-short-vertical-black, .vision-impaired .dark.vertical .section.second .icon-short-vertical.logo-eng-short-vertical-black { opacity: 0; } .section.second .icon-short.logo-eng-short-vertical, .section.second .icon-short-vertical.logo-eng-short-vertical { opacity: 0; } .vertical.english .section.second .icon-short.logo-eng-short-vertical, .vertical.english .section.second .icon-short-vertical.logo-eng-short-vertical { opacity: 1; } .vertical.blue .section.second .icon-short.logo-eng-short-vertical, .vertical.dark .section.second .icon-short.logo-eng-short-vertical, .vertical.diameter_6 .section.second .icon-short.logo-eng-short-vertical, .vertical.english.diameter_10 .section.second .icon-short.logo-eng-short-vertical, .vertical.blue .section.second .icon-short-vertical.logo-eng-short-vertical, .vertical.dark .section.second .icon-short-vertical.logo-eng-short-vertical, .vertical.diameter_6 .section.second .icon-short-vertical.logo-eng-short-vertical, .vertical.english.diameter_10 .section.second .icon-short-vertical.logo-eng-short-vertical { opacity: 0; } .section.second .icon-short.ico-logo-short-vertical-10mm, .section.second .icon-short-vertical.ico-logo-short-vertical-10mm { font-size: 160px; opacity: 0; } .vertical.diameter_10 .section.second .icon-short.ico-logo-short-vertical-10mm, .vertical.diameter_10 .section.second .icon-short-vertical.ico-logo-short-vertical-10mm { opacity: 1; } .vertical.diameter_10.english .section.second .icon-short.ico-logo-short-vertical-10mm, .vertical.diameter_10.english .section.second .icon-short-vertical.ico-logo-short-vertical-10mm { opacity: 0; } .section.second .icon-short.ico-logo-eng-short-vertical-10mm, .section.second .icon-short-vertical.ico-logo-eng-short-vertical-10mm { font-size: 160px; opacity: 0; } .vertical.english.diameter_10 .section.second .icon-short.ico-logo-eng-short-vertical-10mm, .vertical.english.diameter_10 .section.second .icon-short-vertical.ico-logo-eng-short-vertical-10mm { opacity: 1; } .vertical.blue .section.second .icon-short.logo-eng-short-vertical-black, .vertical.dark .section.second .icon-short.logo-eng-short-vertical-black, .vertical.blue .section.second .icon-short-vertical.logo-eng-short-vertical-black, .vertical.dark .section.second .icon-short-vertical.logo-eng-short-vertical-black { opacity: 0; } .vertical.blue .section.second .icon-short.logo-short-vertical-white, .vertical.dark .section.second .icon-short.logo-short-vertical-white, .vertical.blue .section.second .icon-short-vertical.logo-short-vertical-white, .vertical.dark .section.second .icon-short-vertical.logo-short-vertical-white { opacity: 1; } .vertical.blue.english .section.second .icon-short.logo-short-vertical-white, .vertical.dark.diameter_6 .section.second .icon-short.logo-short-vertical-white, .vertical.blue.diameter_6 .section.second .icon-short.logo-short-vertical-white, .vertical.blue.diameter_10 .section.second .icon-short.logo-short-vertical-white, .vertical.dark.english .section.second .icon-short.logo-short-vertical-white, .vertical.dark.diameter_10 .section.second .icon-short.logo-short-vertical-white, .vertical.blue.english .section.second .icon-short-vertical.logo-short-vertical-white, .vertical.dark.diameter_6 .section.second .icon-short-vertical.logo-short-vertical-white, .vertical.blue.diameter_6 .section.second .icon-short-vertical.logo-short-vertical-white, .vertical.blue.diameter_10 .section.second .icon-short-vertical.logo-short-vertical-white, .vertical.dark.english .section.second .icon-short-vertical.logo-short-vertical-white, .vertical.dark.diameter_10 .section.second .icon-short-vertical.logo-short-vertical-white { opacity: 0; } .vertical.blue.english .section.second .icon-short.logo-eng-short-vertical-white, .vertical.dark.english .section.second .icon-short.logo-eng-short-vertical-white, .vertical.blue.english .section.second .icon-short-vertical.logo-eng-short-vertical-white, .vertical.dark.english .section.second .icon-short-vertical.logo-eng-short-vertical-white { opacity: 1; } .vertical.english.diameter_6 .section.second .icon-short.logo-eng-short-vertical-white, .vertical.blue.english.diameter_10 .section.second .icon-short.logo-eng-short-vertical-white, .vertical.dark.english.diameter_10 .section.second .icon-short.logo-eng-short-vertical-white, .vertical.english.diameter_6 .section.second .icon-short-vertical.logo-eng-short-vertical-white, .vertical.blue.english.diameter_10 .section.second .icon-short-vertical.logo-eng-short-vertical-white, .vertical.dark.english.diameter_10 .section.second .icon-short-vertical.logo-eng-short-vertical-white { opacity: 0; } .section.second .logo-short-vertical-black, .section.second .logo-short-vertical-white, .section.second .logo-eng-short-vertical-black, .section.second .logo-eng-short-vertical-white { opacity: 0; } .section.second .download { margin: 0 -15px; padding-top: 500px; } .section.second .download li { margin: 0 4px; } .section.third { margin-bottom: 25px; } .section.third .logo_sizes { margin-top: 30px; } #content .section.third .logo_sizes ul li { margin-bottom: 40px; margin-right: 40px; position: relative; } #content .section.third .logo_sizes ul li:last-child { margin-right: 0; } .vertical #content .section.third .logo_sizes ul li { position: static; vertical-align: bottom; } .section.third .logo_sizes ul li .size { color: #0684bb; display: block; font-size: 13px; text-align: center; } .section.third .logo_sizes ul li .ruler { border: 1px solid #0684bb; border-bottom: 1px solid #fff; display: block; height: 5px; } .section.third .logo_sizes ul li .ico-logo-short, .section.third .logo_sizes ul li .ico-logo-eng-short, .section.third .logo_sizes ul li .ico-logo-short-vertical, .section.third .logo_sizes ul li .ico-logo-short-vertical-6mm, .section.third .logo_sizes ul li .ico-logo-eng-short-vertical-6mm, .section.third .logo_sizes ul li .ico-logo-eng-short-vertical, .section.third .logo_sizes ul li .ico-logo-short-vertical-10mm, .section.third .logo_sizes ul li .ico-logo-eng-short-vertical-10mm, .section.third .logo_sizes ul li .ico-logo-short-10mm, .section.third .logo_sizes ul li .ico-logo-eng-short-10mm, .section.third .logo_sizes ul li .ico-logo-short-6mm, .section.third .logo_sizes ul li .ico-logo-eng-short-6mm { color: #595959; margin: 15px 0; } .vision-impaired .section.third .logo_sizes ul li .ico-logo-short, .vision-impaired .section.third .logo_sizes ul li .ico-logo-eng-short, .vision-impaired .section.third .logo_sizes ul li .ico-logo-short-vertical, .vision-impaired .section.third .logo_sizes ul li .ico-logo-short-vertical-6mm, .vision-impaired .section.third .logo_sizes ul li .ico-logo-eng-short-vertical-6mm, .vision-impaired .section.third .logo_sizes ul li .ico-logo-eng-short-vertical, .vision-impaired .section.third .logo_sizes ul li .ico-logo-short-vertical-10mm, .vision-impaired .section.third .logo_sizes ul li .ico-logo-eng-short-vertical-10mm, .vision-impaired .section.third .logo_sizes ul li .ico-logo-short-10mm, .vision-impaired .section.third .logo_sizes ul li .ico-logo-eng-short-10mm, .vision-impaired .section.third .logo_sizes ul li .ico-logo-short-6mm, .vision-impaired .section.third .logo_sizes ul li .ico-logo-eng-short-6mm { color: #000; } .section.third .logo_sizes ul li:first-child { float: left; max-width: 400px; } .section.third .logo_sizes ul li:first-child .ruler, .section.third .logo_sizes ul li:first-child .size { width: 85px; } .vertical .section.third .logo_sizes ul li:first-child .ruler, .vertical .section.third .logo_sizes ul li:first-child .size { -webkit-transform: translateX(68px); -moz-transform: translateX(68px); -ms-transform: translateX(68px); -o-transform: translateX(68px); transform: translateX(68px); } .vertical.english .section.third .logo_sizes ul li:first-child .ruler, .vertical.english .section.third .logo_sizes ul li:first-child .size { -webkit-transform: translateX(73px); -moz-transform: translateX(73px); -ms-transform: translateX(73px); -o-transform: translateX(73px); transform: translateX(73px); } .section.third .logo_sizes ul li:first-child .ico-logo-short-vertical-10mm, .section.third .logo_sizes ul li:first-child .ico-logo-eng-short-vertical-10mm { font-size: 128px; } .section.third .logo_sizes ul li:first-child .ico-logo-eng-short-10mm, .section.third .logo_sizes ul li:first-child .ico-logo-short-10mm { font-size: 86px; } .section.third .logo_sizes ul li:nth-child(2) { float: left; max-width: 310px; } .section.third .logo_sizes ul li:nth-child(2) .ruler, .section.third .logo_sizes ul li:nth-child(2) .size { width: 40px; } .vertical .section.third .logo_sizes ul li:nth-child(2) .ruler, .vertical .section.third .logo_sizes ul li:nth-child(2) .size { -webkit-transform: translateX(37px); -moz-transform: translateX(37px); -ms-transform: translateX(37px); -o-transform: translateX(37px); transform: translateX(37px); } .vertical.english .section.third .logo_sizes ul li:nth-child(2) .ruler, .vertical.english .section.third .logo_sizes ul li:nth-child(2) .size { -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform: translateX(40px); transform: translateX(40px); } .section.third .logo_sizes ul li:nth-child(2) .ico-logo-short-6mm, .section.third .logo_sizes ul li:nth-child(2) .ico-logo-eng-short-6mm { font-size: 42px; } .section.third .logo_sizes ul li:nth-child(2) .ico-logo-short-vertical-6mm, .section.third .logo_sizes ul li:nth-child(2) .ico-logo-eng-short-vertical-6mm { font-size: 66px; } .section.third .logo_sizes ul li:last-child { bottom: 25px; margin-right: 0; } .section.third .logo_sizes ul li:last-child .size, .section.third .logo_sizes ul li:last-child .ruler { width: 105px; } .vertical .section.third .logo_sizes ul li:last-child .size, .vertical .section.third .logo_sizes ul li:last-child .ruler { -webkit-transform: translateX(135px); -moz-transform: translateX(135px); -ms-transform: translateX(135px); -o-transform: translateX(135px); transform: translateX(135px); } .vertical.english .section.third .logo_sizes ul li:last-child .size, .vertical.english .section.third .logo_sizes ul li:last-child .ruler { -webkit-transform: translateX(150px); -moz-transform: translateX(150px); -ms-transform: translateX(150px); -o-transform: translateX(150px); transform: translateX(150px); } .section.third .logo_sizes ul li:last-child .ico-logo-eng-short-vertical, .section.third .logo_sizes ul li:last-child .ico-logo-short-vertical { font-size: 200px; } .section.third .logo_sizes ul li:last-child .ico-logo-short, .section.third .logo_sizes ul li:last-child .ico-logo-eng-short { font-size: 110px; } .section.third img { margin: 15px 0 0; } .section.third .remark { color: #999; font-size: 14px; margin: 15px 0 65px; } .vision-impaired .section.third .remark { color: #000; font-size: 16px; } .section.third .logo-with-description-eng, .section.third .logo-with-description { margin: 70px 0; } .section.third .description_section_colors { margin-bottom: 0; } .section .items-wrapper .items { margin-bottom: 54px; } .section .items-wrapper .items .item { background: #77787b; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; display: inline-block; font-size: 13px; min-height: 140px; padding: 25px; width: 50%; } .section .items-wrapper .items .item .row.color_description .column:nth-child(1) { width: 70px; } .section .items-wrapper .items .item .row.color_description .column:nth-child(2) { width: -webkit-calc(100% - 70px); width: -moz-calc(100% - 70px); width: calc(100% - 70px); } .section.colors .items-wrapper.backgrounds .items:nth-child(1) .item:nth-child(1) { background: #0088bb; } .section.colors .items-wrapper.backgrounds .items:nth-child(1) .item:nth-child(2) { background: #00bbee; } .section.colors .items-wrapper.backgrounds .items:nth-child(2) .item:nth-child(1) { background: #ee1133; } .section.colors .items-wrapper.backgrounds .items:nth-child(2) .item:nth-child(2) { background: #ff5a5a; } .section.colors .items-wrapper.backgrounds .items:nth-child(3) .item:nth-child(1) { background: #ffbb44; } .section.colors .items-wrapper.backgrounds .items:nth-child(3) .item:nth-child(2) { background: #ffcc88; color: #77787b; } .section.colors .items-wrapper.texts .items:nth-child(1) .item:nth-child(1) { background: #000; } .section.colors .items-wrapper.texts .items:nth-child(1) .item:nth-child(2) { background: #555; } .section.colors .titles { margin-bottom: 20px; margin-top: 0; } .vision-impaired .section.colors .titles { font-size: 16px; } .section.colors .titles .title { display: inline-block; font-weight: 600; width: 50%; } .section.colors .titles.mobile { display: none; } .section.gradients h4 + p { padding-right: 25px; width: -webkit-calc(100% - 335px); width: -moz-calc(100% - 335px); width: calc(100% - 335px); } .section.gradients h4 + p + .row { margin-top: 30px; } .section.gradients .column.shades { width: -webkit-calc(100% - 30px); width: -moz-calc(100% - 30px); width: calc(100% - 30px); } .section.gradients .column.direction { width: 30px; } .section.gradients .column.direction span { background: #0684bb; display: block; height: -webkit-calc(100% - 54px); height: -moz-calc(100% - 54px); height: calc(100% - 54px); min-height: 200px; position: absolute; width: 2px; } .section.gradients .column.direction span:after { border-style: solid; border-width: 9px 4px 0 4px; border-color: #0684bb transparent transparent transparent; bottom: -1px; content: ''; height: 0; left: -3px; position: absolute; width: 0; } .section.gradients .column.direction span:before { background: #0684bb; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; content: ''; height: 6px; left: -2px; position: absolute; width: 6px; } .section.gradients .column.direction .text { color: #0684bb; font-size: 12px; left: 0; position: absolute; top: 50%; -webkit-transform: translate(-50px, -50%) rotate(-270deg); -moz-transform: translate(-50px, -50%) rotate(-270deg); -ms-transform: translate(-50px, -50%) rotate(-270deg); -o-transform: translate(-50px, -50%) rotate(-270deg); transform: translate(-50px, -50%) rotate(-270deg); white-space: nowrap; } .section.gradients .items-wrapper .item { width: 100%; } .section.gradients .shade { width: -webkit-calc(100% - 200px); width: -moz-calc(100% - 200px); width: calc(100% - 200px); } .section.gradients .shade .column { width: 40%; } .section.gradients .shade .items:nth-child(1) .item:nth-child(1) { background-image: -webkit-gradient(linear, left top, left bottom, from(#0082bb), to(#00bce7)); background-image: -webkit-linear-gradient(top, #0082bb 0%, #00bce7 100%); background-image: -moz- oldlinear-gradient(top, #0082bb 0%, #00bce7 100%); background-image: -o-linear-gradient(top, #0082bb 0%, #00bce7 100%); background-image: linear-gradient(180deg, #0082bb 0%, #00bce7 100%); } .section.gradients .shade .items:nth-child(1) .item:nth-child(2) { background-color: #77787b; } .section.gradients .shade .items:nth-child(2) .item:nth-child(1) { background-image: -webkit-gradient(linear, left top, left bottom, from(#ee1a35), to(#f1665d)); background-image: -webkit-linear-gradient(top, #ee1a35 0%, #f1665d 100%); background-image: -moz- oldlinear-gradient(top, #ee1a35 0%, #f1665d 100%); background-image: -o-linear-gradient(top, #ee1a35 0%, #f1665d 100%); background-image: linear-gradient(180deg, #ee1a35 0%, #f1665d 100%); } .section.gradients .shade .items:nth-child(2) .item:nth-child(2) { background-color: #77787b; } .section.gradients .shade .items:nth-child(3) .item:nth-child(1) { background-image: -webkit-gradient(linear, left top, left bottom, from(#faa619), to(#ffd586)); background-image: -webkit-linear-gradient(top, #faa619 0%, #ffd586 100%); background-image: -moz- oldlinear-gradient(top, #faa619 0%, #ffd586 100%); background-image: -o-linear-gradient(top, #faa619 0%, #ffd586 100%); background-image: linear-gradient(180deg, #faa619 0%, #ffd586 100%); } .section.gradients .shade .items:nth-child(3) .item:nth-child(2) { background-color: #77787b; } .section.gradients .shade_description { width: 200px; } .section.gradients .shade_description .items .item { background: transparent; color: #000; margin: -10px 0 10px 0; padding: 0 25px; position: relative; } .section.gradients .shade_description .items .item:after { content: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; height: 20px; left: -21px; position: absolute; top: 0; width: 20px; } .section.gradients .shade_description .items .item:before { content: ''; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; height: 24px; left: -23px; position: absolute; top: -2px; width: 24px; } .section.gradients .shade_description .items:nth-child(1) .item:nth-child(1):after { background: #0082bb; } .section.gradients .shade_description .items:nth-child(1) .item:nth-child(2):after { background: #00bce7; } .section.gradients .shade_description .items:nth-child(2) .item:nth-child(1):after { background: #ee1a35; } .section.gradients .shade_description .items:nth-child(2) .item:nth-child(2):after { background: #f1665d; } .section.gradients .shade_description .items:nth-child(3) .item:nth-child(1):after { background: #faa619; } .section.gradients .shade_description .items:nth-child(3) .item:nth-child(2):after { background: #ffd586; } .section.horizont h4 + p { padding-right: 25px; width: -webkit-calc(100% - 335px); width: -moz-calc(100% - 335px); width: calc(100% - 335px); } .section.horizont .icon-short { color: #fff; font-size: 50px; position: absolute; -webkit-transform: translate(25px, 25px); -moz-transform: translate(25px, 25px); -ms-transform: translate(25px, 25px); -o-transform: translate(25px, 25px); transform: translate(25px, 25px); } .section.horizont .horizont_img { background: url("/f/media/logostyle/horizont.jpg") no-repeat; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; min-height: 600px; width: 100%; } .section.four .row { margin: 50px 0; } .section.four .row h3 { margin-top: 20px; } .section.four .row .ico-logo-short-10mm, .section.four .row .ico-logo-without-title { color: #595959; font-size: 120px; } .section.four .row .years { color: #999; font-size: 14px; margin: 0; padding-top: 10px; text-align: center; width: 120px; } .vision-impaired .section.four .row .years { color: #000; } .section .section_content { position: relative; } .section .section_content:after { content: ''; display: table; clear: both; } .section .section_content .main_section_content { float: left; padding-right: 25px; width: -webkit-calc(100% - 335px); width: -moz-calc(100% - 335px); width: calc(100% - 335px); } .section .section_content .main_section_content + .extra_section_content { float: left; padding: 0; position: relative; width: 310px; } .section .section_content .main_section_content + .extra_section_content .holder { background: #f7f7f7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: fixed; } .section .section_content .main_section_content + .extra_section_content .holder.stopped { position: absolute; } .section .section_content .extra_section_content:first-of-type { display: none; } .section .section_content .extra_section_content h4 { margin-top: 0; } .section .section_content .extra_section_content .holder .holder_inner { padding: 20px; } .section .section_content .extra_section_content .holder .holder_inner .download ul { margin-bottom: 0 !important; } .section .section_content .extra_section_content .holder .holder_inner .download ul li { margin-bottom: 0 !important; } .section .section_content .extra_section_content .holder .holder_inner .download ul li > div:hover { background: #e7e7e7; } .section .clipboard_copy { cursor: default; display: block; font-size: 14px; margin-bottom: 15px; margin-top: 15px; } .section .clipboard_copy .pseudo { color: #999; border-color: rgba(153, 153, 153, 0.3); cursor: pointer; } .vision-impaired .section .clipboard_copy .pseudo { color: #000; border-color: rgba(0, 0, 0, 0.3); } .vision-impaired #content ul.switcher.type_colors li.selected { border-color: #000; } /* @author Oleg Krasnov (krasnov@artlebedev.ru) @created 2018.04.03 @copyright Art. Lebedev Studio (http://www.artlebedev.ru/) This source code follows Formatting section of Google CSS Style Guide https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules */ @media (max-width: 1150px) { .section.four .row .ico-logo-short-10mm, .section.four .row .ico-logo-without-title { font-size: 105px; } .section.four .row img { width: 105px; } } @media (max-width: 1080px) { #page:not(.wide) #nav { display: none; } #page:not(.wide) #main { margin-left: 0 !important; } #page:not(.wide) .section.second { height: 470px; } #page:not(.wide) .section.second .download { padding-top: 400px; } #page:not(.wide) .section.second .icon-short.ico-logo-short, #page:not(.wide) .section.second .icon-short-vertical.ico-logo-short { font-size: 170px; } #page:not(.wide) .section.second .icon-short.ico-logo-short-10mm, #page:not(.wide) .section.second .icon-short-vertical.ico-logo-short-10mm { font-size: 85px; } #page:not(.wide) .section.second .icon-short.ico-logo-short-6mm { font-size: 45px; } #page:not(.wide) .section.second .icon-short.ico-logo-short-vertical, #page:not(.wide) .section.second .icon-short-vertical.ico-logo-short-vertical { font-size: 260px; } #page:not(.wide) .section.second .icon-short.ico-logo-short-vertical-10mm, #page:not(.wide) .section.second .icon-short-vertical.ico-logo-short-vertical-10mm { font-size: 130px; } #page:not(.wide) .section .section_content .main_section_content { padding-right: 0; width: 100%; } #page:not(.wide) .section .section_content .main_section_content + .extra_section_content { width: 100%; } #page:not(.wide) .section .section_content .main_section_content + .extra_section_content:last-of-type { display: none; } #page:not(.wide) .section .section_content .extra_section_content:first-of-type { display: block; } #page:not(.wide) .section .section_content .extra_section_content .holder { position: static; width: 100% !important; } #page:not(.wide) .section .section_content .extra_section_content .holder.stopped { position: static; } #page:not(.wide) .section.gradients h4 + p, #page:not(.wide) .section.horizont h4 + p { padding-right: 0; width: 100%; } } @media (max-width: 992px) { .nav { display: none; } #main { margin-left: 0 !important; } .section.second { height: 470px; } .section.second:before { left: -15px; width: 100vw; } .wide .section.second:before { left: -15px; width: 100vw; } .section.second .download { padding-top: 400px; } .section.second .icon-short.ico-logo-short, .section.second .icon-short-vertical.ico-logo-short { font-size: 170px; } .section.second .icon-short.ico-logo-short-10mm, .section.second .icon-short-vertical.ico-logo-short-10mm { font-size: 85px; } .section.second .icon-short.ico-logo-short-6mm { font-size: 45px; } .section.second .icon-short.ico-logo-short-vertical, .section.second .icon-short-vertical.ico-logo-short-vertical { font-size: 260px; } .section.second .icon-short.ico-logo-short-vertical-10mm, .section.second .icon-short-vertical.ico-logo-short-vertical-10mm { font-size: 130px; } .section .section_content .main_section_content { padding-right: 0; width: 100%; } .section .section_content .main_section_content + .extra_section_content { width: 100%; } .section .section_content .main_section_content + .extra_section_content:last-of-type { display: none; } .section .section_content .extra_section_content:first-of-type { display: block; } .section .section_content .extra_section_content .holder { position: static; width: 100% !important; } .section .section_content .extra_section_content .holder.stopped { position: static; } .section.gradients .shade .column { width: 50%; } .section.gradients h4 + p, .section.horizont h4 + p { padding-right: 0; width: 100%; } } @media (max-width: 720px) { .section.second { height: 370px; } .section.second .download { padding-top: 300px; } .section.second .icon-short.ico-logo-short, .section.second .icon-short-vertical.ico-logo-short { font-size: 130px; } .section.second .icon-short.ico-logo-short-10mm, .section.second .icon-short-vertical.ico-logo-short-10mm { font-size: 65px; } .section.second .icon-short.ico-logo-short-6mm { font-size: 35px; } .section.second .icon-short.ico-logo-short-vertical { font-size: 205px; } .section.second .logo-short-vertical { width: 300px; } .section.second .icon-short.ico-logo-short-vertical-10mm, .section.second .icon-short-vertical.ico-logo-short-vertical-10mm { font-size: 100px; } .section.colors .items-wrapper .items .item { width: 100%; } .section.colors .items-wrapper .items .item:nth-child(4) { display: none; } .section.third .row .column { width: 100%; } } @media (max-width: 820px) { .items-wrapper.backgrounds .item > .row > .column { margin-bottom: 15px; padding: 0 !important; width: 100%; } .items-wrapper.backgrounds .item > .row > .column:last-child { margin-bottom: 0; } .section.third .logo_sizes ul li:nth-child(1), .section.third .logo_sizes ul li:nth-child(2) { max-width: 100%; } } @media (max-width: 720px) { .items-wrapper.backgrounds .item > .row > .column { margin-bottom: 15px; padding: 0 !important; width: 50%; } .section.colors .titles:first-of-type { display: none; } .section.colors .titles.mobile { display: block; } .section.colors .titles.mobile .title { width: 100%; } .section.second .icon-short.ico-logo-eng-short, .section.second .icon-short-vertical.ico-logo-eng-short { font-size: 80px; } .section.second .icon-short.ico-logo-eng-short-10mm, .section.second .icon-short-vertical.ico-logo-eng-short-10mm { font-size: 70px; } #page:not(.wide) .section.second .icon-short.ico-logo-short, #page:not(.wide) .section.second .icon-short-vertical.ico-logo-short { font-size: 90px; } } @media (max-width: 680px) { .section.gradients .shade .column { padding: 0; width: 100%; } .section.gradients .shade .item > .row > .column { margin-bottom: 15px; } .section.gradients .shade .item > .row > .column:last-child { margin-bottom: 0; } .section.gradients .column.shades { width: 100%; } .section.gradients .column.direction { display: none; } #page:not(.wide) .section.second .download { padding-top: 360px; } .section.second .download { padding-top: 270px; } } @media (max-width: 576px) { .section.horizont .icon-short { font-size: 40px; } .section.second { height: 270px; } .section.second .download { padding-top: 165px; } .section.second .icon-short.ico-logo-short, .section.second .icon-short-vertical.ico-logo-short { font-size: 80px; } .section.second .icon-short.ico-logo-short-10mm, .section.second .icon-short-vertical.ico-logo-short-10mm { font-size: 65px; } .section.second .icon-short.ico-logo-short-vertical { font-size: 130px; } .section.second .logo-short-vertical { width: 200px; } #content .section.third .logo_sizes ul li { display: block; width: 100%; } .section.four .row .column, .section.five .row .column { margin-right: 0; text-align: left; width: 100%; } .section.four .row .column .years, .section.five .row .column .years { margin: 15px 0 25px; } } @media (max-width: 500px) { .items-wrapper.backgrounds .item > .row > .column { margin-bottom: 15px; padding: 0 !important; width: 100%; } .section.gradients .row.color_description .column { padding: 0 !important; width: 100% !important; } .section.gradients .shade_description, .section.gradients .shade { width: 50%; } .section.gradients .shade_description .items:nth-child(1) .item:nth-child(2) { height: 215px; } } @media (max-width: 450px) { h1 { font-size: 240%; } .section.four .row .ico-logo-short-10mm, .section.four .row .ico-logo-without-title { font-size: 72px; } .section.four .row .years { text-align: left; width: 100%; } .section.four .row img { width: 72px; } .section.horizont .icon-short { font-size: 30px; -webkit-transform: translate(15px, 15px); -moz-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); transform: translate(15px, 15px); } .section.horizont .horizont_img { min-height: 500px; } .section.third .logo_sizes ul li:last-child .ico-logo-eng-short-vertical, .section.third .logo_sizes ul li:last-child .ico-logo-short-vertical { font-size: 145px; } .vertical.english .section.third .logo_sizes ul li:last-child .size, .vertical.english .section.third .logo_sizes ul li:last-child .ruler { -webkit-transform: translateX(92px); -moz-transform: translateX(92px); -ms-transform: translateX(92px); -o-transform: translateX(92px); transform: translateX(92px); } } @media (max-width: 425px) { #content .section.first .download ul li { margin-left: -7px; margin-right: -7px; } #content .section.first .settings .setting { white-space: normal; } #content .section.first .settings .setting .delimiter { display: none; } .section.third .logo_sizes ul li:first-child .ico-logo-eng-short-10mm, .section.third .logo_sizes ul li:first-child .ico-logo-short-10mm { font-size: 70px; } .section.third .logo_sizes ul li:last-child .ico-logo-short, .section.third .logo_sizes ul li:last-child .ico-logo-eng-short { font-size: 80px; } #page:not(.wide) .section.second .icon-short.ico-logo-short-10mm, #page:not(.wide) .section.second .icon-short-vertical.ico-logo-short-10mm { font-size: 70px; } .vertical .section.third .logo_sizes ul li:last-child .size, .vertical .section.third .logo_sizes ul li:last-child .ruler { left: 50%; position: relative; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } } @media (max-width: 375px) { #content .section.first .settings .setting:first-child { height: auto; } #content .section.first .settings .setting:first-child > div:first-child { display: block; } .section.third .row .ico-logo-short { font-size: 70px; } #page:not(.wide) .section.second .download { padding-top: 310px; } }