@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 5.8
Requires PHP: 5.6
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Media text...........Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Spacer...............Specific styles for the spacer block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

/* Categories 01 to 03 are the basics. */

/* Variables */

body{
	font-family: 'Montserrat', sans-serif;
	margin: 0;
	box-sizing: border-box;
}
*, *::after, *::before{
	box-sizing: inherit;
}
/* .entry-content img {
	margin: 0 0 1.5em 0;
	} */
.alignleft, img.alignleft {
	margin-right: 1.5em;
	display: inline;
	float: left;
	}
.alignright, img.alignright {
	margin-left: 1.5em;
	display: inline;
	float: right;
	}
.aligncenter, img.aligncenter {
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
	}
.alignnone, img.alignnone {
	/* not sure about this one */
	}
.wp-caption {
	margin-bottom: 1.5em;
	text-align: center;
	padding-top: 5px;
	}
.wp-caption img {
	border: 0 none;
	padding: 0;
	margin: 0;
	}
.wp-caption p.wp-caption-text {
	line-height: 1.5;
	font-size: 10px;
	margin: 0;
	}
.wp-smiley {
	margin: 0 !important;
	max-height: 1em;
	}
blockquote.left {
	margin-right: 20px;
	text-align: right;
	margin-left: 0;
	width: 33%;
	float: left;
	}
blockquote.right {
	margin-left: 20px;
	text-align: left;
	margin-right: 0;
	width: 33%;
	float: right;
	}
.header{
	background: #141F2D;	
	padding: 8px 0;
}
.header__navigation{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
} 
.menu_header{
	padding: 0;
    margin: 0;
    display: flex;
    list-style: none;
}
.menu_header .menu-item{
margin-left: 64px;
}
.menu_header .menu-item a{
	text-decoration: none;
	font-weight: 500;
font-size: 14px;
line-height: 17px;
letter-spacing: 0.02em;
color: #EFEFEF;
}
.menu__wrapper{
	margin-right: 64px;
}
.header__social{
	max-width: 184px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.menu_header .menu-item a:hover{
text-decoration: underline;
}
.footer{
padding: 44px 0 38px;	
background: #08090B;
}
.footer__items{
	display: flex;
}
.footer__logo-block{
	margin-right: 55px;
}
.menu_footer{
	padding: 0;
    margin: 0;
	list-style: none;
	width: 100%;
}
.menu_footer .menu-item{
	width: max-content;
	margin-bottom: 17px;
}
.menu_footer .menu-item a{
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 15px;
align-items: center;
letter-spacing: 0.02em;
color: #FFFFFF;
text-decoration: none;
}
.footer__wrapper{
	margin-right: 84px;
}
.footer__copyright{
	margin-top: 25px;
	font-size: 12px;
	line-height: 24px;
	letter-spacing: 0.06em;
	color: #9D9D9D;	
	max-width: 600px;
}
.cards__container{
	padding: 48px 0 64px;
}
.card__item{
	display: flex;
	margin-bottom: 32px;
}
/* .card__item img {
	max-width: 230px;
	width: 100%;
	height: auto;
} */
.card__thumbnail{
	margin-right: 20px;
}
.card__title{
	text-decoration: none;
	font-weight: 500;
font-size: 18px;
line-height: 25px;
color: #414141;
margin-bottom: 16px;
}
.card__info{
	display: flex;
	justify-content: space-between;
}
.card__info-content{
	display: flex;
}
.card__body{
	width: 100%;
}
.author__link{
	display: flex;
	align-items: center;
}
.author__link a{
font-weight: 300;
font-size: 13px;
line-height: 16px;
letter-spacing: 0.03em;
color: #0083E2;
text-decoration: none;
}
.author__link img{
	margin-right: 7px;
	max-width: 12px;
}
.card__date{
	font-weight: 300;
font-size: 13px;
line-height: 23px;
letter-spacing: 0.03em;
color: #737886;
display: flex;
    align-items: center;
}
.card__date img{
margin-right: 8px;
}
.card__description{
	font-weight: 300;
font-size: 13px;
line-height: 23px;
letter-spacing: 0.03em;
color: #414141;
}
.on__header-item{
padding: 24px 24px 32px;
background-size: cover;
text-decoration: none;

}
.banner__on-header{
	margin-top: 10px;
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
	height: 360px;
    text-decoration: none;

}
.on__header-item-text{
	font-weight: 800;
	font-size: 18px;
	line-height: 25px;
	color: #FFFFFF;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
	display: flex;
	justify-content: center;
	height: 100%;
	align-items: flex-end;
    text-decoration: none;
}
.on__header-item:first-child{
	grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-end: 3;
}
.sep{
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 100%;
	background-color: #0083E2;
}
.breadcrumbs{
	display: flex;
    align-items: center;
    gap: 8px;
    margin: 32px 0;
	color: #0083E2;
}
.breadcrumbs a{
    color: #0083E2;
    text-decoration: none;
}
.breadcrumbs a:hover{
	text-decoration: underline;
}
.thumbnail{
	width: 100%;
}
.content_404{
    text-align: center;
	margin-bottom: 60px;
}
.title_404{
    font-size: 144px;
    font-weight: 900;
    color: #737886;
}
.descr_404{    
	font-size: 18px;
}
.link_to_main{
	display: inline-flex;
	padding: 5px 12px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 3px;
	background: #D2EFF8;
	font-size: 13px;
	font-style: normal;
	font-weight: 300;
	line-height: 25px; /* 192.308% */	
	letter-spacing: 0.26px;
	color: #0083E2;
	text-decoration: none;
}
.link_to_main:hover{
	color: #1F97DB;
	background: #C5E4ED;
}
.card__thumbnail{
	width: 285px;
	display: block;
}
.card__image{
	width: 100%;
}
table{
	margin: 0 auto;
    border: 1px solid #CFD2DD;
    border-collapse: collapse;	
}
table th, table td{
	border: 1px solid #CFD2DD;
	padding: 7px;
}
.header__logo-link img {
	width: 100%;
    height: auto;
}
/* .header__navigation {
	align-items: center;
    justify-content: flex-end;
    height: 100%;
} */
.header__navigation:first-child div {
	width: 100%;
}
.menu_header {
	flex-wrap: wrap;
	justify-content: center;
    row-gap: 20px;
}
.comment-respond {
	display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
}
.form-title {
	text-align: center;
}
#commentform {
	display: flex;
    flex-direction: column;
    gap: 10px;
}
textarea#comment {
	width: 100%;
    height: 100px;
}
input#author, input#email {
	width: 100%;
    height: 35px;
}
.form__submit {
	min-width: 300px;
    max-width: 400px;
    margin: 0 auto;
}
.form__submit input {
	width: 100%;
}
/* media */

@media(max-width: 991px){
	.menu_header .menu-item {
		margin-left: 30px;
	}
}
@media(max-width: 767px){
	.header__logo-link{
		display: block;
    	height: 32px;
	}
	.header__logo-link img{
		height: 100%;
	}
	.footer__items{
		flex-direction: column;
		gap: 32px;
	}
	.mobile_menu_btn{
		width: 30px;
		height: 30px;
		border-radius: 100%;
		background: #fff;
		padding: 8px 6px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.mobile_menu_btn .line{
		display: block;
		width: 100%;
		height: 2px;
		background-color: #141F2D;
	}
	.open.header{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9;
	}
	.open .mobile_menu_btn{
		position: relative;
	}
	.open .line_1, .open .line_2{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%) rotate(45deg);
		width: 18px;
	}
	.open .line_2{
		transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	}
	.open .line_3{
		display: none;
	}
	.mobile_menu{
		display: none;
	}
	.open .mobile_menu{
		position: absolute;
		display: block;
		top: 100%;
		left: 0;
		height: 100vh;
		background: #141f2dfc;
	}
	.open .mobile_menu .menu_header{
		flex-direction: column;
		gap: 32px;
		margin-top: 32px;
		margin-bottom: 32px;
	}
	.menu_header .menu-item{
		margin: 0;
	}
	.swiper {
		width: 100%;
		height: 300px;
	}
	.swiper-backface-hidden .swiper-slide{
		background-repeat: no-repeat;
    	background-size: cover;
		text-decoration: none;
	}
	.on__header-item-text{
		align-items: center;
	}
	.swiper-pagination-bullet-active{
		background: #fff !important;
	}
	.card__description{
		display: none;
	}
	.card__thumbnail{
		width: 275px;
		display: block;
	}
	.card__image{
		width: 100%;
	}
}

/* button.sub-menu-toggle, li .menu-item-description {
	display: none;
}
.menu_header li .sub-menu {
	display: flex;
	flex-direction: column;
	position: absolute;
    padding-left: unset;
    background-color: #28365b;
    box-shadow: 0px 5px 5px 1px #796e6e;
	max-height: 0;
	height: auto;
	pointer-events: none;
	visibility: hidden;
	transition: all ease-in-out .3s;
	border-radius: 10px;
	    max-height: 800px;
    pointer-events: all;
}

.menu_header .menu-item a {
	width: 100%;
    display: inline-block;
    padding: 5px 10px;
    max-width: 200px;
}

.menu_header .menu-item{
	margin-left:0;
}
.menu_header{
	gap:150px;
}
ul, ol {
    list-style-type: none;
}

.menu_header li.menu-item-has-children {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
} */

.menu_header {
	gap: 20px;
}
.menu_header li {
	display: inline-block;
    margin: 0;
    position: relative;
}
.menu_header .menu-item {
	margin-left: unset;
	width: max-content;
}
button.sub-menu-toggle {
	display: none;
}
.menu_header li .sub-menu {
	display: flex;
	flex-direction: column;
	position: absolute;
    padding-left: unset;
    background-color: #28365b;
    box-shadow: 0px 5px 5px 1px #796e6e;
	max-height: 0;
	height: auto;
	pointer-events: none;
	visibility: hidden;
	transition: all ease-in-out .3s;
	border-radius: 10px;
}
.menu_header .menu-item a {
	width: 100%;
    display: inline-block;
    padding: 5px 10px;
    max-width: 200px;
}
li.menu-item-has-children.open > .sub-menu {
	max-height: 800px;
	pointer-events: all;
	visibility: visible;
/* 	overflow-y: auto; */
}
li.menu-item-has-children.open svg {
	rotate: 180deg;
}
.menu_header li.menu-item-has-children {
	display: flex;
    justify-content: space-between;
    align-items: center;
	gap: 20px;
}
.header__menu_btn svg {
	fill: #fff;
	transition: all ease-in-out .3s;
}
.menu_header li .sub-menu {
	top: 40px;
}



.banner__on-header{
	margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* height: 360px; */
    text-decoration: none;
    gap: 20px;
    margin-bottom: 20px;
}
/* media */