html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset { margin: 0; padding: 0; } 

:focus::-webkit-input-placeholder { opacity:0; } 
:focus::-moz-placeholder { opacity:0; } 
:focus:-moz-placeholder { opacity:0; } 
:focus:-ms-input-placeholder { opacity:0; } 
::-webkit-input-placeholder { color:#A4A2A0; opacity:1; } 
::-moz-placeholder { color:#A4A2A0; opacity:1; } 
:-moz-placeholder { color:#A4A2A0; opacity:1; } 
:-ms-input-placeholder { color:#A4A2A0; opacity:1; } 

body { background: #F7F7F7; color:#1D2746; font-family: Open Sans, Tahoma, Arial, Verdana; font-size: 100%; } 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 
main { width: 100%; margin: 0 auto; display: block; overflow: hidden;}

nav { background: #fff; box-shadow: 0 1px 15px rgba(0,0,0,0.1); width: 100%; position: sticky; top: 0; }
.nav { max-width: 1000px; margin: 0 auto; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; position: relative;}
.nav .logo	 { background: url(images/logo.png) no-repeat; width: 218px; height: 32px;}
.menu { display: flex; list-style: none; }
.menu li a { color: #1F1F1F; text-decoration: none; padding: 10px 15px; display: block; font-weight: bold; transition: color 0.3s; }
.menu li a:hover { color: #8180E0; }
.menu li a.search { opacity: 1; background: url(images/search.png) center center no-repeat; filter: grayscale(100%); height: 42px; width: 42px; padding: 0; display: block; transition: 0.3s; border-radius: 21px; }
.menu li a.search:hover { opacity: 1; filter: grayscale(0); transition: 0.3s; }
 .menu li a.ask { color: #fafafa; background: #8180E0; text-decoration: none; padding: 10px 15px; display: block; font-weight: bold; transition: 0.3s; border-radius: 21px; margin: 0 0 0 10px; }
.menu li a.ask:hover { background: #1F1F1F; color: #fff; transition: 0.3s; }
 .menu-toggle { display: none; cursor: pointer; width: 32px; height: 22px; position: relative; z-index: 101; }
 .menu-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #364E4E; border-radius: 3px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out;}
 .menu-toggle span:nth-child(1) { top: 0; }
 .menu-toggle span:nth-child(2), .menu-toggle span:nth-child(3) { top: 10px; }
 .menu-toggle span:nth-child(4) { top: 20px; }
 .menu-toggle.active span:nth-child(1) { top: 10px; width: 0%; left: 50%; }
 .menu-toggle.active span:nth-child(2) { transform: rotate(45deg); }
 .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg); }
 .menu-toggle.active span:nth-child(4) { top: 10px; width: 0%; left: 50%; }


main a { font-size: 100%; font-weight: bold; text-decoration: none; color: #00B0E6; -webkit-box-shadow: 0px -2px 0px 0px #00B0E6 inset; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s;}
main a:hover { cursor: pointer; color: #301B25; -webkit-box-shadow: 0px -2px 0px 0px #301B25 inset; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; }
main h1 { font-size: 180%; margin: 0; line-height: 1.25; }
main h2 { font-size: 160%; margin: 0 ; line-height: 1.25; }
main h3 { font-size: 140%; margin: 0 ; line-height: 1.25; }

main table { width: 100%; font-size: 100%; border-collapse: collapse; color: #333; background-color: #f8f8f8; overflow: hidden; margin: 2% 0 0 0; cursor: default; }
main th, main td { padding: 12px 15px; text-align: left; }
main th { background-color: #e0e0e0; font-weight: bold; color: #555; }
main table tr:nth-child(even) { background: #f0f0f0; }
main table td { border-bottom: 1px solid #ddd; }
main td img { float: left; border-radius: 5px; padding: 2px; margin: 0 5px 0 0; width: 20px; height: 20px; display: block;}


.white-up { background: url(images/white-up.png) center 100% no-repeat; width: 100%; height: 30px; margin: 0 auto; display: block; overflow: hidden;}
.white-down { background: url(images/white-down.png) center 100% no-repeat; width: 100%; height: 30px; margin: 0 auto; display: block; overflow: hidden;}

.grey-up { background: url(images/grey-up.png) center 100% no-repeat; width: 100%; height: 30px; margin: 0 auto; display: block; overflow: hidden;}
.grey-down { background: url(images/grey-down.png) center 100% no-repeat; width: 100%; height: 30px; margin: 0 auto; display: block; overflow: hidden;}



.header { width: 100%; background: #8180E0 url(images/header-bg.png) no-repeat; margin: 0 auto; display: block; overflow: hidden; cursor: default; padding: 2% 0 0 0;}
.header-width { width: 1000px; padding: 0 0 1% 0; display: block; margin: 0 auto; overflow: hidden;}
.header-img { float: right; text-align: right; margin: 0 3% 0 0; padding: 0; display: block; overflow: hidden; width: 30%; }
.header-img img { margin: 0 auto; display: block; width: 100%; height: 100%;}
.header-info { float: left; margin: 0 0 0 3%; display: block; overflow: hidden; width: 58%;}
.header-info h1 { margin: 0; line-height: 1.25; color: #fafafa; text-shadow: rgba(0,0,0,0.1) 0 1px;}
.header-info p { margin: 4% 0 0 0; line-height: 1.5; color: #fff; text-shadow: rgba(0,0,0,0.1) 0 1px;}

.header-grid {width: 94%; display: block; overflow: hidden; text-align: center; padding: 0 3% 1% 3%; margin: 2% 0 0 0; color: #fff; font-size: 90%;}
.header-grid li {display: block; width: 29%; float: left; margin: 2% 2% 0 2%;}
.header-grid span {width: 100%; display: block; overflow: hidden;}
.header-grid img {width: 72px; height: 72px; }
 
 @media (max-width: 1000px)
 { 
main, footer { max-width: 100%; }
.nav { max-width: 100%; }
.header-width { max-width: 100%; padding: 2% 0 1% 0;}
.section-1-width { max-width: 100%; }
.section-2-width { max-width: 96%; padding: 0 2%;}
.section-3-width { max-width: 96%; padding: 0 2%;}
.section-4-width { max-width: 96%; padding: 0 2%;}

}
 @media (max-width: 768px)
 { 
.nav { padding: 20px;  }
.menu { position: absolute; top: 100%; left: 0; width: 100%; background: #f8f8f8; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.menu.active { max-height: 500px; }
.menu li { text-align: center; border-top: 1px solid #eee; background: #fff; }
 .menu li a { color: #301B25; text-decoration: none; padding: 15px; display: block; font-weight: bold; transition: color 0.3s; }
.menu li a.ask { border-radius: 0; padding: 15px 0; margin: 0; }
.menu li a.search {width: 100%; padding: 5px 0; display: block; }
.menu-toggle { display: block; }

.header-img { float: none; width: 52%; margin: 4% 0 0 0; padding: 0 24%; }
.header-info { float: none; width: 92%; margin: 0 4%;}
.section-1-img { float: none; width: 52%; margin: 0 0; padding: 0 24% 2% 24%; }
.section-1-info { float: none; width: 92%; margin: 0 4% 0 4%;}

.section-2-h3 { padding: 4%; margin: 2%; width: 94%; border-radius: 15px; display: block;}
.section-2-img {padding: 3% 0 2% 0;}
.section-2-img img { width: 62%;}

.section-3-img { float: none; width: 52%; margin: 0 0; padding: 0 24% 2% 24%; }
.section-3-info { float: none; width: 92%; margin: 0 3%;}

.section-4-img { float: none; width: 52%; margin: 0 0; padding: 0 24% 2% 24%; }
.section-4-info { float: none; width: 92%; margin: 0 3%;}



.block1-text { float: none; width: 94%; padding: 3% 3% 0 3%; }
.block1-img { float: none; width: 100%; padding: 0;}
.block1-img img { margin: 2% auto; display: block;}

.block2-text { float: none; width: 94%; padding: 3% 3% 0 3%; }
.block2-img { float: none; width: 100%; padding: 0;}
.block2-img img { margin: 2% auto; display: block;}

.block-h3 { padding: 2% 3% 4% 3%; margin: 2%; width: 94%; border-radius: 15px; display: block;}
.block3 h3 { margin: 1% 1% 3% 1%;}


}