html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,address,em,img,strong,tt,var,b,u,i,ul,li,fieldset,form,label,table,tr,th,td,article,aside,canvas,footer,header,menu,nav,section,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;} *{padding:0;margin:0; box-sizing: border-box;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} audio,canvas,video{display:inline-block;} html{font-size:100%; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -o-text-size-adjust:100%; -ms-text-size-adjust:100%; text-size-adjust:100%} html,body{ height: 100%; } body{line-height:1; height: 100%; font-family: 'Montserrat', sans-serif; } ol,ul{list-style:none;padding:0;margin:0} table{border-collapse:collapse;border-spacing:0} .clear{clear:both} .clearfix{clear:both; zoom:1} .clearfix:before, .clearfix:after{display:table;line-height:0;content:""} .clearfix:after{clear:both} a{color:#4C91E4;text-decoration:none;} a:focus{outline: none} button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle} button,input{overflow:visible;} button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0} button{cursor:pointer; -webkit-appearance:button; -moz-appearance:button; -o-appearance:button; -ms-appearance:button;appearance:button;} select,button{cursor:pointer} input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; -ms-appearance:none;appearance:none;} textarea{overflow:auto;vertical-align:top;resize:vertical} p{font-size:13px;line-height:19px;} label,input,button,select,textarea{font-size:13px;line-height:20px} label{display:block;margin-bottom:5px} select,textarea{box-sizing: border-box;display:inline-block;height:70px;padding:4px 6px;margin-bottom:10px;font-size:14px;line-height:20px;color:#555;vertical-align:middle; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; -ms-border-radius:4px; border-radius:4px} select{box-sizing: border-box;} strong{font-weight:700} em{font-style:normal} ::-webkit-input-placeholder {font-size: 15px;color: #6C6C6C;} ::-moz-placeholder {font-size: 15px;color: #6C6C6C;} :-ms-input-placeholder {font-size: 15px;color: #6C6C6C;} :-moz-placeholder {font-size: 15px;color: #6C6C6C;}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {display: inline-block;border-radius: 0;box-shadow: none;font-size: 15px;margin: 0;padding: 11px 8px;border: 1px solid #DBE0EB;background: #fff;}
textarea:focus, input:focus{outline: none;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer;-webkit-appearance: button;-moz-appearance: button;-o-appearance: button;-ms-appearance: button; appearance: button;} 
input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {width: auto;}
input, textarea, .uneditable-input {color:#000;}
label, input, button, select, textarea {font-size: 13px;font-weight:400;}
button, input, select, textarea {margin: 0;vertical-align: middle;}
button{border: none;box-shadow: none}
h1,h2,h3,h4,h5,h6,b,td,th{font-weight: normal}
i,em{font-style: normal}
optgroup[label="Cars"] { color: red; } optgroup[label="Bikes"] { color: blue; } option { color: black; }
b{font-weight: 500;}
.bold{font-weight: 600;} 

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_cJD3gnD_vx3rCs.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gnD_vx3rCs.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gnD_vx3rCs.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body{    background: url(../images/bg.jpg) no-repeat; position: fixed; left: 0; right: 0; bottom: 0; top: 0; background-size: cover; padding: 50px;}
header{       width: 1200px; margin: 0 auto; display: flex; justify-content: space-between;}
.wrapper{width: 1200px; margin: 0 auto;}
header .logo{width:345px;height: 40px;background: url(../images/logo.svg) no-repeat;display: block;background-size: 100%;}
header .navigation li .home_ic{background: url(../images/home_icon_inactive.svg) no-repeat ; width:24px;height:22px;display: block;background-size: 100%;}
.menu .navigation li.active .home_ic{height:16px;}
header .navigation li.active .home_ic{background: url(../images/home_icon.svg) no-repeat ;}
.menu .navigation ul { display: flex; }
.menu .navigation li { flex-wrap: wrap; flex-direction: row;    margin: 0 20px; }
.menu .navigation a {font-size: 17px;color: #45350e; }
.menu .navigation a:hover,.menu .navigation li.active a { color: #ffc122; }
.menu .navigation li.active {    background: #fff;    margin-top: -8px; padding: 8px 21px; border-radius: 25px; box-shadow: 0px 2px 7.36px 0.64px rgba(0, 0, 0, 0.09); color: #ffc123; }
.menu .navigation li.active.home_iconli{    padding: 10px 21px;}
header .menu nav ul li a { text-decoration: none; color: #37474F; }
.menu .hamburger { position: absolute; clip: rect(0, 0, 0, 0); top: 0; right: 0; }
.menu label[for="hamburger"] { position: fixed; width: 29px; height: 21px; border: 0; border-top: 3px solid #362808; background-color: transparent; box-sizing: border-box; z-index: 1; margin: 15px; transition: left .3s linear; cursor: pointer; }
.menu label[for="hamburger"]::before, label[for="hamburger"]::after { content: ''; position: absolute; right: 0; top: 0; border-top: 3px solid #362808; width: 100%; transform: translateY(7px); }
.menu label[for="hamburger"]::after { transform: translateY(18px); transition: transform .3s linear; }
.menu .hamburger:checked + label { right: 250px; transform: rotate(45deg) translateY(5px); border: none; }
.menu .hamburger:checked + label::after { transform: rotate(-90deg) translateX(-8px); }
.menu .hamburger:checked ~ .page-container { right: 250px; }
.menu .hamburger + label, .page-container { top: 30px; right: 30px }
.menu .hamburger, label[for="hamburger"] { display: none; }

.home_content{color: #362809; font-size: 15px; line-height: 26px; width: 950px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.home_content img  {      height: 159px;vertical-align: top; display: inline-block;margin-right: 46px; margin-top: 10px; width: 156px;}
.home_content span em{display: block;    margin-bottom: 20px;}
.home_content span{    display: inline-block; width: 77%;}

.products_content{         width: 945px; position: absolute; top: 40%; left: 52%; -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);}
.products_content ul h6{font-size: 20px;color: #594e34;}
.products_content ul a{color: #392a07;font-size: 15x;line-height: 28px;}
.products_content ul li{ list-style: disc;margin: 20px 0; margin-left: 40px; }
.products_content ul li img{   margin-left: 12px;  width: 16px;}
.products_content ul{ margin-left: 50px; width: 365px; display: inline-block; vertical-align: top;}
.products_content ul:first-child{ border-right: 1px solid #ddd2b1; margin-left: 0;  width: 505px;  padding-right: 50px;}
.products_content ul li:first-child{  margin-left: 0;  list-style: none;}
.products_content ul:last-child{float: right}

.resources_content{width:980px; position: absolute; top: 40%; left: 50%;-webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);}
.resources_content ul li img ~ span{color: #241a05;font-size: 15px;margin-left: 20px;line-height: 23px;}
.resources_content ul li img ~ span.oilworld_txt{    margin-left:42px;}
.resources_content h3{font-size: 20px;color: #94711a; position: relative;   flex: 1 100%;}
.resources_content ul li a{    display: flex; align-items: center;}
.resources_content ul{   width: 420px; float: right; margin-left: 70px;}
.resources_content ul.firstul{margin-left: 0;    width: 490px;float: left;}
.resources_content ul li{margin-top: 40px }
.resources_content h3::before{background: #d2b160;content: '';position: absolute;left: 0;     bottom: -20px;   width: 110px;height: 2px;}
.resources_content ul:last-child li:first-child a{ margin-left: 30px;}

.contact_content{ position: absolute; top: 40%; left: 50%;-webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);}
.contact_content h3{font-size: 20px;color: #94711a; position: relative;   flex: 1 100%;}
.contact_content h3::before{background: #d2b160;content: '';position: absolute;left: 0;     bottom: -20px;   width: 110px;height: 2px;}
.contact_content ul li span em.super_txt{vertical-align: super;font-size: 12px;}
.contact_content ul{ margin-top: 50px;    width: 230px;   float: right;    margin-left: 50px;}
.contact_content ul li span,.contact_content ul li a{font-size: 15px;line-height: 28px;  margin-left: 20px; text-align: left; }
.contact_content ul li a{color: #ab7f05;text-decoration: underline}
.contact_content ul li p{display: flex}
.contact_content ul li img{align-self: flex-start;    margin-top: 10px;}
.contact_content ul li .address_wr span{text-transform: uppercase;width: 200px;}
.contact_content ul li .ph_wr{display: flex}
.contact_content ul li .ph_wr span{    display: flex;flex-flow: column wrap;}
.contact_content ul li.mail_wr{margin: 20px 0;}
.contact_content ul.first{ border-right: 1px solid #ddd2b1;      margin-left: 0;  width: 275px;    float: left; padding-right: 50px;}

footer{display: flex; background: #4d432a; position: fixed; left: 0; right: 0;justify-content: space-between; bottom: 0; padding: 7px 50px;}
footer .copyright_txt{font-size: 13px;color: #ffdd87;    align-self: center;}
footer img{margin-right: 10px;}
footer .wrapper{    display: flex;justify-content: space-between;}

@media only screen and (max-width:1366px) {
   header, .wrapper{width: 1100px; }

}
@media only screen and (max-width:1280px) {
    .products_content{width: 800px;}
    .products_content ul:first-child { width: 435px;}
    .products_content ul { width: 308px;}
    header, .wrapper { width: 980px; }

}

@media only screen and (max-width:1100px) {
    .contact_content { width: 555px; }
    header, .wrapper{width: 980px; }
    .resources_content {  width: 870px;}
    .resources_content ul li a { line-height: 26px;}
    .resources_content ul.firstul {width: 375px;}
   
}
@media only screen and (max-width:1024px) {
    .home_content{ width: 80%;    overflow: auto;}
    .products_content{overflow: auto;}
    .products_content ul {  margin-left: 0;  width: 100%;}
    .products_content ul:first-child{border: none;padding: 0;margin: 0;}
    .resources_content{width: 800px;  overflow: auto;}
    .resources_content ul{width: 420px;}
    header, .wrapper{width: 100%; }
    .resources_content {  width: 870px;}
}
@media only screen and (max-width:1000px) {
    .products_content {width: 80%;}
}
@media only screen and (max-width:768px) {
    .menu .hamburger, label[for="hamburger"] { display: block; }
    .menu .navigation ul{display: none}
    .menu .hamburger:checked + label ~ .navigation ul{    display: flex; flex-direction: column; flex-wrap: wrap;}
    .menu .hamburger:checked + label { z-index: 3;    right: 160px;top: 0;}
    .menu .navigation { z-index: 1; width: auto; right: 10px; top:10px; }
    .menu .navigation ul{background: #fff;z-index: 2; position: absolute; right: 0; top: 0; padding: 20px;    min-width: 220px;    text-align: center;}
    .menu .navigation li.active{box-shadow: none;}
    .menu .navigation li.home_iconli {    align-self: center;}
    .menu .navigation li{margin:15px 0}
    .home_content{    flex-direction: column; overflow: auto;}
    .products_content ,.contact_content,.resources_content{     flex-flow: column;   bottom: 0; overflow: auto; overflow-y: overlay;}
    .home_content img{margin-bottom: 20px;  }
    .contact_content ul.first,.resources_content h3::before,.products_content ul:first-child{ border-right:none}
    .resources_content{width: 80%;top: 43%; overflow: auto;}
    .resources_content ul{margin-left: 0;width: 100%}
    .resources_content h3{flex: unset;}
    .resources_content ul li img ~ span{margin-left: 72px;}
    .resources_content ul li img ~ span.last{    margin-left:20px;}
    .contact_content h3{flex:unset}
    .contact_content ul {     margin-left: 0;   flex: unset;margin-top: 30px;}
    .contact_content { width: 80%;       top: 46%;}
    .resources_content ul:last-child li:first-child a{margin-left: 0;}
    .contact_content ul.first,.contact_content ul{width: 100%;float: none;display: block;    padding: 0;}
    .products_content {width: 80%; top: 47%;}
    .products_content ul:first-child{width: 100%;}
    .resources_content ul li img ~ span.oilworld_txt { margin-left: 72px; }
}