/*
Theme Name: AlboProRus
Author: Awart
Author URI: https://awart.ru/
Description: Awart Theme
Version: 1.0
*/

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/OpenSans-Bold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/OpenSans-BoldItalic.ttf');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/OpenSans-Italic.ttf');
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/OpenSans-Regular.ttf');
}

@font-face {
    font-family: 'FiraSans';
    src: url('fonts/FiraSans/FiraSans-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'Lora';
    src: url('fonts/Lora/Lora-Regular.ttf');
}

* {font-family: 'Open Sans', sans-serif}

html, body {height: 100%; color: #000}

#general {margin-bottom: -150px; min-height: 100%}
#general::after {content: ''; display: block; clear: both; height: 150px}
#footer {min-height: 150px}


h1 {line-height: 1; font-family: 'Lora', serif; font-size: 60px}
h2 {margin-bottom: 25px; text-transform: uppercase; font-family: 'Lora', serif; font-size: 30px}
h3 {}

p, ul, ol, table, label {font-size: 14px; margin: 0 0 20px 0; padding: 0; color: #000}
li {margin: 0 0 10px 30px}

a:link, a:visited {text-decoration: underline; color: #acbc2d}
a:hover, a:active {text-decoration: none; color: #acbc2d}
/*a:hover, a:active, a:focus {outline: none}*/

img {border: none; vertical-align: bottom}
input, textarea {border-width: 1px; border-style: solid; font-size: 16px !important}


/* textarea {resize: none} */
/* input, select, textarea {box-sizing: content-box; outline: none} /* KHTML */

/* Table */
table {border-collapse: collapse; border-color: #999}
td, th {padding: 3px 5px; border-width: 1px; border-color: #999; border-style: solid}/*border-style*/
th {background-color: #ccc}

hr {clear: both; height: 1px; margin: 20px 0; border: none; background-color: rgba(0,0,0,0.2)}

.edit_post_link {clear: both}
.entry_thumbnail {float: left; margin: 0 20px 20px 0}
.single_thumbnail {float: left; margin: 0 20px 20px 0}
.type_post.post_category {clear: both}

/*** Wordpress ***/
article {clear: both}

.alignleft {display: inline; float: left; margin: 0 30px 20px 0}
.alignright {display: inline; float: right; margin: 0 0 20px 30px}
.aligncenter {display: block; margin-right: auto; margin-left: auto; margin-bottom: 10px}

.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {max-width: 100%; height: auto}
/*** /Wordpress ***/

/*** Cookie notifier ***/
div#cookie_notifier {position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; padding: 20px 10px; background-color: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.5)}
div#cookie_notifier i {position: absolute; right: 10px; top: 5px; font-style: normal; color: #777; cursor: pointer}
div#cookie_notifier i::before {content: '\2716'}
div#cookie_notifier p {margin: 0; padding: 0; text-align: center; color: #000}
div#cookie_notifier p span {display: inline-block; margin-left: 10px; padding: 6px 10px; color: #fff; background-color: #777; cursor: pointer}
/*** /Cookie notifier ***/

/*** Top menu ***/
ul.main_menu {display: flex; justify-content: space-between; margin: 0}
ul.main_menu li {display: block; /*flex-grow: 1;*/ position: relative; margin: 0}
ul.main_menu li a {display: block}
/*** /Top menu ***/

/*** Top menu drop down ***/
ul.main_menu li ul {position: absolute; display: none; top: 100%; left: 0; margin: 0; z-index: 100}
ul.main_menu > li > ul {min-width: 100%}
ul.main_menu li:hover > ul {display: block}
ul.main_menu li ul li {position: relative; white-space: nowrap}
ul.main_menu li ul li ul {top: 0; left: 100%}
/*** /Top menu drop down ***/

/* Category nav */
.nav_pages {clear: left; margin-top: 30px}
.nav_pages a {text-decoration: none} 
.nav_current, .nav_link, .nav_prev, .nav_next {display: inline-block; margin: 0 2px; padding: 2px 10px}
span.nav_before {margin-right: 10px}
span.nav_current {color: #fff; background-color: #f27022}

/* Next/Prev posts nav */
.nav_posts::after {content: ''; display: block; clear: both}
.prev_link {float: left; width: 30%}
.next_link {float: right; width: 30%; text-align: right}


/*** Gallery ***/
div.gallery {text-align: center}
div.gallery figure {display: inline-block; width: 200px; margin: 0 10px 20px 10px; vertical-align: top}
div.gallery figcaption {margin: 10px 0}
/*** /Gallery ***/

/*** Gallery flex ***/
/*
div.gallery {display: flex; flex-wrap: wrap; justify-content: space-between}
div.gallery figure {display: inline-block; width: 200px; margin-bottom: 20px; vertical-align: top}
div.gallery figcaption {margin: 10px 0}
/*** /Gallery flex ***/

/*** Contact Form ***/
div.contact_form {box-sizing: border-box; max-width: 765px; margin: auto}
div.contact_form * {font-size: 14px}
div.contact_form::after {content: ''; display: block; clear: both}

div.contact_form label {display: block; margin-bottom: 10px}
div.contact_form label span.ftitle {display: block; margin-bottom: 10px}
div.contact_form label span.ffield {display: block; margin-bottom: 10px}

div.contact_form label.field_one_line {clear: both}
div.contact_form label.field_one_line span.ftitle {float: left; width: 50%}
div.contact_form label.field_one_line span.ffield {float: right; width: 50%}

div.contact_form label.field_two_line {clear: both}

div.contact_form label.field_50:nth-of-type(2n - 1) {float: left; clear: both; width: 45%}
div.contact_form label.field_50:nth-of-type(2n) {float: right; width: 45%}

div.contact_form label input, div.contact_form label textarea {box-sizing: border-box; width: 100%; padding: 0 20px; border: none; background: linear-gradient(to bottom, #e0e0e0 0, #fff 100%); box-shadow: 5px 5px 5px rgba(0,0,0,0.2)}
div.contact_form label input {height: 50px}
div.contact_form label textarea {height: 170px; padding: 15px 20px; resize: vertical}

div.contact_form label input[type='checkbox'][name='confidentiality'] {width: auto; height: auto; margin-right: 10px}

div.contact_form div.fbuttons {float: left; clear: both; width: 100%; margin-top: 10px}
div.contact_form div.fbuttons input {display: block; width: 45%; height: 30px; border: none; background-color: #9fb500; cursor: pointer}
div.contact_form div.fbuttons input:hover {background-color: #b2c433}
div.contact_form div.fbuttons input[type='submit'] {width: 180px; height: 50px; margin: auto; border-radius: 25px; font-weight: bold; font-size: 18px !important; color: #fff}


div.wpcf7 .screen-reader-response {display: none}
div.contact_form div.wpcf7-response-output {margin: 0 0 20px 0; padding: 0; border: none}
div.contact_form div.wpcf7-validation-errors {line-height: 1.1; font-size: 14px; color: #f66}
div.contact_form div.wpcf7-mail-sent-ok {text-align: center; color: #ad7}
div.contact_form span.wpcf7-not-valid-tip {line-height: 1.1; font-size: 14px; color: #f66}
div.contact_form div.wpcf7-spam-blocked {text-align: center; color: #cc0}
/*** /Contact Form ***/

ol.privacy_policy_list, ol.privacy_policy_list ol {counter-reset: num_list_counter; margin: 10px 0 20px 0; padding-left: 0}
ol.privacy_policy_list li {display: block; margin: 0 0 10px 0}
ol.privacy_policy_list li:before {content: counters(num_list_counter, '.') ' '; counter-increment: num_list_counter}

ol.privacy_policy_list li {text-transform: uppercase; font-weight: bold}
ol.privacy_policy_list li li {text-transform: none; font-weight: normal}

ol.privacy_policy_list ul {padding-left: 30px}
ol.privacy_policy_list ul li {display: list-item}
ol.privacy_policy_list ul li:before {display: none}


.container-fluid {padding: 0 40px; max-width: 1600px}

.dummy > * {opacity: 0}

/*** Design ***/

#general {}
#header {min-height: 140px; background: linear-gradient(to right, #fff 50%, transparent 50%), url('images/green_noise.png') repeat 0 0}
#header * {text-shadow: 1px 1px 1px rgba(0,0,0,0.26)}
#header div.menu_area {height: 140px; background: #a9bc2b url('images/green_noise.png') repeat 0 0}
#header div.logo {display: block; width: 355px; max-width: 90%; height: 90px; margin-top: 42px; background-repeat: no-repeat; background-position: 0 0; background-size: contain}
#header div.phone {margin-top: 34px; text-align: right; font-size: 24px; font-weight: bold}
#header div.phone::before {content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 5px; background: url('images/icon_phone.png') no-repeat 0 0; background-size: contain}
#header div.phone a {text-decoration: none; color: #fff}
#header div.email {text-align: right}
#header div.email a {text-decoration: none; font-size: 16px; font-family: 'Fira Sans', sans-serif; font-weight: bold; color: #fff}
#header div.email a:hover {text-decoration: underline}
#header div.email::before {content: ''; display: inline-block; width: 18px; height: 10px; margin-right: 8px; background: url('images/icon_mail.png') no-repeat 0 0; background-size: contain}
#header div.langs ul {text-align: right}
#header div.langs ul li {display: inline-block; margin: 0 0 0 20px}
#header div.langs ul li a {text-decoration: none; text-transform: uppercase; font-size: 16px; color: #fff}
#header div.langs ul li a:hover {text-decoration: underline}
#header div.langs ul li.current-lang a {color: #4b5d05}

/* Top menu override */
div#top_nav {min-height: 34px; margin-left: 40px; padding-top: 52px}
ul.main_menu li a {padding: 0 7px; text-align: center; text-decoration: none; line-height: 34px; font-weight: bold; font-size: 16px; color: #fff}
ul.main_menu > li.current_page_ancestor:hover::after, ul.main_menu > li.current-page-ancestor:hover::after, ul.main_menu > li.current-post-ancestor:hover::after, ul.main_menu > li.current-menu-item:hover::after, ul.main_menu > li.current-menu-parent:hover::after, ul.main_menu > li.current-menu-ancestor:hover::after {content: ''; display: block; height: 3px; background-color: #fff}

div#main {}
div#main::after {content: ''; display: block; clear: both}

div.main_index, div.main_page, div.main_single, div.main_search, div.main_404 {padding: 60px 80px; border: 2px solid #ccc; border-width: 2px 0 0 0}


div.top {min-height: 520px; background: #61594b url('images/top_bg.jpg') no-repeat 50% 0; background-size: cover}
div.top h1 {margin: 120px 0 0 0; padding-bottom: 65px; text-align: center; color: #fff; background: url('images/h1_bg.png') no-repeat 50% 100%; text-shadow: 5px 5px 5px rgba(0,0,0,0.3)}
div.top h2 {margin: -15px 0 30px 0; text-transform: none; text-align: center; font-family: 'Open Sans'; font-weight: bold; font-size: 18px; color: #fff; text-shadow: 5px 5px 5px rgba(0,0,0,0.3)}
div.top a#write {display: block; width: 210px; height: 50px; margin: 0 auto 20px auto; border-radius: 25px; text-align: center; text-decoration: none; line-height: 48px; font-size: 18px; font-weight: bold; color: #fff; background-color: #9fb500}
div.top a#write:hover {background-color: #b2c433}
div.top div.phone {position: relative; z-index: 5; margin-bottom: 40px; text-align: center; font-size: 30px; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3)}
div.top div.phone::before {content: ''; display: inline-block; width: 24px; height: 24px; margin-right: 10px; background: url('images/icon_phone.png') no-repeat 0 0; background-size: contain}
div.top div.phone a {text-decoration: none; color: #fff}

div.peanut {margin-bottom: 120px}
div.peanut::before {content: ''; display: block; position: absolute; right: 0; bottom: -140px; width: 614px; height: 281px; background: url('images/peanut.png') no-repeat right -70px top 0}

div#about div.container-fluid {min-height: 360px; padding-top: 5px; background: url('images/ship.jpg') no-repeat 0 0}

h2#advantages {margin: 80px 0 40px 0; text-align: center}

div.quality {height: 280px; background: #423128 url('images/quality_bg.jpg') no-repeat 50% 50%; background-size: cover}
div.quality * {color: #fff}
div.quality div.col::before {content: ''; display: block; width: 80px; height: 80px; margin: 40px auto 10px auto; background: url('images/icon_peanut.png') no-repeat 50% 50%; background-size: contain}
div.quality div.row {height: 100%; background: url('images/quality_triangle.png') no-repeat 50% 100%}
div.quality h3 {text-align: center; font-size: 30px; font-weight: bold}
div.quality h4 {text-align: center; line-height: 1.3em; font-size: 14px; font-weight: bold}

div.quality_control {padding-top: 40px; background-color: #e8e8e8}
div.quality_control ol {margin-bottom: 0; counter-reset: i}
div.quality_control ol li {margin: 0 0 35px 0; list-style: none}
div.quality_control ol li::before {content: counter(i) '.'; counter-increment: i; display: block; float: left; margin: -20px 15px 0 0; font-family: 'Lora', serif; font-size: 60px}

div.advantages i {display: block; width: 80px; height: 80px; margin: 56px auto 15px auto; border-radius: 40px; background-position: 50% 50%; background-size: contain}
div.advantages i.price {background-image: url('images/icon_price.png')}
div.advantages i.conditions {background-image: url('images/icon_conditions.png')}
div.advantages i.logistics {background-image: url('images/icon_logistics.png')}
div.advantages h3 {margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: bold}
div.advantages p {text-align: justify}

h2#production {margin: 120px 0 40px 0; text-align: center}

div.illustrations div.gallery {display: flex; flex-wrap: wrap; justify-content: space-around; max-width: 80%; margin: auto}
div.illustrations div.gallery figure {display: block; width: 418px; margin: 0 0 20px 0; transition: all 1s} 
div.illustrations div.gallery figure figcaption {margin: 20px 0; text-align: center; font-size: 18px; font-weight: bold}

div#contacts {padding: 80px 0 125px 0; background: #383b3c url('images/contacts_bg.jpg') no-repeat 50% 50%}
div#contacts h2 {margin-bottom: 30px; text-align: center; color: #fff}
div#contacts p {color: #fff}
div#contacts p.contacts {margin-bottom: 40px; text-align: center; font-weight: bold; font-size: 18px}
div#contacts p.contacts strong {font-size: 24px}
div#contacts p.contacts a {text-decoration: none; font-family: 'Fira Sans', sans-serif; color: #fff}
div#contacts p.contacts a:hover {text-decoration: underline}
div#contacts label.acceptance {color: #fff}
div#contacts div.columns {display: flex; justify-content: space-between}
div#contacts div.columns > div {flex-basis: 48%}


#footer {background-color: #a6b928}
#footer * {color: #fff}
#footer div.phone {margin-top: 32px; font-size: 24px; font-weight: bold}
#footer div.phone a {text-decoration: none}
#footer div.phone::before {content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 5px; background: url('images/icon_phone.png') no-repeat 0 0; background-size: contain}
#footer div.email a {text-decoration: none; font-size: 16px; font-family: 'Fira Sans', sans-serif; font-weight: bold}
#footer div.email a:hover {text-decoration: underline}
#footer div.email::before {content: ''; display: inline-block; width: 18px; height: 10px; margin-right: 8px; background: url('images/icon_mail.png') no-repeat 0 0; background-size: contain}
#footer div.address {padding-top: 42px; font-weight: bold; font-size: 14px}
#footer div.copy {margin-top: 42px; text-align: right; font-size: 14px}
#footer div.made {margin: 20px 0; text-align: right; font-size: 14px}


/*** /Design ***/


/*** Adaptive ***/
@media screen and (min-device-width: 1600px)
{
    div.peanut::before {background: url('images/peanut.png') no-repeat right 0 top 0}
    
    div#about {background: url('images/ship_big.jpg') no-repeat left calc(100% / 2 - 1000px) top 0; background-size: contain}
    div#about div.container-fluid {background: none}
}


/*** Bootstrap ***/
@media (max-width: 1199.98px) /* Bootstrap xl */
{
    #header {background: #fff}
    #header div.container-fluid {padding: 0}
    #header div.container-fluid div.row {margin: 0}
    #header div#menu_wrapper {background: url('images/green_noise.png') repeat 0 0}
    #header div.logo {margin-left: auto; margin-right: auto}
    #header div.contacts {padding-right: 40px; background: url('images/green_noise.png') repeat 0 0}
    
    div.illustrations div.gallery {max-width: 100%}
}

@media (max-width: 991.98px) /* Bootstrap lg */
{
    div.peanut::before {bottom: -220px; width: 500px; background-size: contain}
    
    div#about div.container-fluid {background: none}
    div#about div.container-fluid div.col-lg-5 {height: 200px; margin-bottom: 20px; background: url('images/ship.jpg') no-repeat 0 0; background-size: contain}
    
    div.quality_control ol li::before {width: 50px; text-align: center}
}

@media (max-width: 767.98px) /* Bootstrap md */
{
    div.top h1 {margin: 60px 0 0 0; font-size: 50px}
    
    div.peanut::before {bottom: -220px; width: 400px}

    /*** Responsive menu ***/
    div#hamburger {padding: 10px; cursor: pointer}
    div#hamburger::before {content: ''; display: inline-block; width: 24px; height: 18px; background: linear-gradient(to bottom, #fff 10%, transparent 10%, transparent 45%, #fff 45%, #fff 55%, transparent 55%, transparent 90%, #fff 90%)}
    div#hamburger::after {content: ''; display: inline-block; margin-left: 8px; line-height: 18px; font-size: 16px; color: #fff; vertical-align: top}

    ul#top_menu li:hover > ul {display: none} /*Disable CSS open*/

    ul#top_menu {display: none; width: auto; height: auto; background: url('images/green_noise.png') repeat 0 0; box-shadow: 0 0 10px rgba(0,0,0,0.5)}
    ul#top_menu.menu_absolute {position: absolute; z-index: 600}
    ul#top_menu.menu_open {display: block}
    ul#top_menu.width_100 {width: 100%}
    ul#top_menu li {border: 1px solid #fff; border-width: 1px 0 0 0}
    ul#top_menu li a {padding: 16px 20px; text-align: left; line-height: normal}
    ul#top_menu li ul {display: none; position: static; background-color: rgba(255,255,255,0.3)}
    ul#top_menu li ul.menu_open {display: block}
    ul#top_menu li ul li {white-space: normal}
    ul#top_menu li ul li a {padding: 16px 20px 16px 40px}
    ul#top_menu li ul li ul li a {padding-left: 60px}

    ul#top_menu li a span.menu_arrow {float: right; display: inline-block; margin: -8px 0 0 10px; cursor: pointer}
    ul#top_menu li a span.menu_arrow.menu_arrow_down::before {content: '\25be'; font-size: 2em}
    ul#top_menu li a span.menu_arrow.menu_arrow_up::before {content: '\25b4'; font-size: 2em}
    /*** /Responsive menu ***/
    
    ul.main_menu > li:hover::after {display: none !important}
}

@media (max-width: 575.98px) /* Bootstrap sm */
{
    .container-fluid {padding: 0 20px}

    #header div.phone {font-size: 22px}
    
    div.peanut::before {bottom: -250px; width: 300px}
    
    div#top_nav {margin-left: 10px}
    
    h2#advantages {margin: 40px 0}
    h2#production {margin: 40px 0}
    
    div.illustrations ul {display: flex; flex-wrap: wrap; justify-content: space-around; max-width: 100%; margin: auto}
    div.illustrations ul li {display: block; width: 420px; margin: 0 0 20px 0} 
    div.illustrations div.gallery {display: flex; flex-wrap: wrap; justify-content: space-around; max-width: 100%; margin: auto}
    
    div#contacts {padding: 60px 0}
    div#contacts div.columns {display: block}

    #footer * {text-align: center !important}
}