.title_block {
margin: 100px auto 80px;
max-width: 900px;
text-align: center;
}

.title_block2 {
margin: 160px auto;
}

.title {
font-size: 52px;
font-family: "Raleway", serif;
}

.subtitle {
font-size: 19px;
margin-top: 40px;
}


#main_block {
width: 1200px;
margin: 0 auto;
position: relative;
}

.filters {
text-align: center;
}

.filter {
background: transparent;
width: max-content;
position: relative;
height: 50px;
text-align: center;
cursor: pointer;
font-size: 17px;
font-family: "Raleway-Medium", serif;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
transition-delay: .4s;
margin: 0 10px 10px 0;
z-index: 0;
}

.filter:hover {
z-index: 10;
transition-delay: 0s;
}

.name_filter {
display: inline-flex;
position: relative;
font-family: "Raleway-Medium", serif;
font-weight: 500;
border: 2px solid var(--dark);
width: max-content;
height: 100%;
background: white;
padding: 0 20px;
border-radius: 100px;
box-sizing: border-box;
align-items: center;
justify-content: center;
min-width: 0;
transition: .25s;
}

.filter_tags:hover>.name_filter {
min-width: 250px;
}

.filter_themes:hover>.name_filter {
min-width: 350px;
}

.filter_monument_style:hover>.name_filter {
min-width: 250px;
}

.active_filter>.name_filter {
background: var(--dark);
color: white;
}

.name_filter:after {
content: "";
position: relative;
transition: .3s;
display: block;
border-right: 5px solid transparent;
border-top: 5px solid var(--dark);
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
margin-left: 10px;
margin-top: 9px;
}

.active_filter>.name_filter:after {
display: none;
}

.select_filter {
box-sizing: border-box;
position: absolute;
top: 23px;
width: 100%;
font-family: "ZenKakuGothicNew-Regular", serif;
border-left: 1px solid #eaeaea;
border-right: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
opacity: 0;
font-weight: normal;
visibility: hidden;
transition: .4s;
background: white;
padding-top: 30px;
overflow: auto;
max-height: 300px;
}

.select_filter::-webkit-scrollbar {
width: 4px;
}

.select_filter::-webkit-scrollbar-track {
background: white;
}

.select_filter::-webkit-scrollbar-thumb {
background-color: #dcdcdc;
border-radius: 100px;
height: 20px;
}

.filter:hover>.select_filter {
opacity: 1;
visibility: visible;
}

.select_filter>div {
padding: 12px;
transition: .25s;
}

.select {
background: var(--dark);
color: white;
}

.select_filter>div:hover {
background: var(--dark);
color: white;
}

.cancel_filter {
left: 22px;
margin-left: -20px;
width: 50px;
height: 50px;
min-width: 50px;
align-items: center;
display: none;
justify-content: center;
position: relative;
border-radius: 100px;
box-sizing: border-box;
}

.active_filter>.name_filter>.cancel_filter {
display: flex;
}

.cancel_filter:before,
.cancel_filter:after {
content: "";
transform: rotate(-45deg);
width: 2px;
height: 20px;
position: absolute;
background: white;
}

.cancel_filter:after {
transform: rotate(45deg);
}

#priority {
display: none;
}

.maps_type {
display: none;
}

.architecture_sculptures {
display: none;
}

.personalities {
display: none;
}

.select_events {
display: none;
}


#search {
border: 1px solid #CDCDCD;
width: 600px;
margin-right: 20px;
padding: 13px 26px;
position: relative;
color: var(--dark);
border-radius: 100px;
font-size: 19px;
display: block;
font-family: "ZenKakuGothicNew-Regular", serif;
}

#search::placeholder {
color: var(--gray);
font-size: 19px;
}

#search:focus {
outline: none;
}

.search_block {
display: flex;
width: max-content;
margin: 0 auto 50px;
}

#go_search {
height: auto;
min-width: 120px;
}

.author {
color: var(--gray);
margin-bottom: 20px;
font-size: 14px;
}

#blank {
width: 200px;
margin-top: 20px;
left: 50%;
transform: translate(-50%);
position: relative;
padding: 0 30px;
margin-bottom: 140px;
border-radius: 12px;
}

.themes,
.theme {
display: none;
}

.theme>div {
width: calc(33.33% - 51px);
display: inline-block;
vertical-align: top;
}

.theme>div>b {
display: block;
margin-bottom: 5px;
font-size: 14px;
}

.task_list {
width: 100%;
margin: 80px auto;
min-height: 400px;
}

.task {
position: relative;
width: calc(33.333% - 40px);
margin: 20px 20px 60px;
display: inline-block;
text-decoration: none;
vertical-align: top;
color: var(--dark);
transition: .25s;
cursor: pointer;
}

.task:hover {
transform: scale(1.01);
}

.task:hover::after {
content: attr(data-title);
}

.illustration {
width: 100%;
}

.task_name {
font-size: 22px;
margin-top: 10px;
}

.information {
width: max-content;
border-radius: 10px;
display: inline-flex;
margin: 20px 20px 0 0;
font-size: 19px;
}

.difficulty {
width: 50px;
height: 28px;
top: 8px;
display: inline-flex;
margin-right: 10px;
position: relative;
align-items: baseline;
}

.difficulty>div {
height: 33.33%;
width: 100%;
margin: 1.5px;
background: #f2f2f2;
border-radius: 10px;
}

.difficulty1>div:nth-child(1),
.difficulty2>div:nth-child(1),
.difficulty3>div:nth-child(1) {
background: var(--dark);
}

.difficulty2>div:nth-child(2),
.difficulty3>div:nth-child(2) {
background: var(--dark);
}

.difficulty3>div:nth-child(3) {
background: var(--dark);
}

.passed {
color: var(--gray);
margin-top: 10px;
position: relative;
width: max-content;
}

.mark {
margin-top: 10px;
}

.new {
position: absolute;
color: white;
font-family: "Raleway-Medium", serif;
display: flex;
font-weight: 500;
font-size: 14px;
align-items: center;
justify-content: center;
background: var(--dark);
width: max-content;
padding: 10px 20px;
border-radius: 100px;
top: 10px;
right: 10px;
}


.maps {
width: calc(33.33% - 40px);
margin: 20px 20px 60px;
display: inline-block;
vertical-align: top;
}


.object_picture {
width: 100%;
object-fit: cover;
max-height: 360px;
}

.object_name {
font-size: 19px;
font-family: "ZenKakuGothicNew-Regular", serif;
margin-top: 20px;
}

.object_text {
white-space: pre-wrap;
display: none;
margin-top: 40px;
margin-bottom: 20px;
font-size: 19px;
}

.open_object {
display: none;
}


.hide_object {
display: none;
}

.share {
width: 30px;
display: none;
position: absolute;
bottom: 10px;
right: 0;
cursor: pointer;
filter: brightness(0.9);
transition: .25s;
}

.share:hover {
filter: brightness(0.9);
}

.reveal_image {
display: none;
margin-top: 20px;
color: var(--gray);
}

.active_object {
cursor: default;
width: calc(100% - 40px);
display: flex;
}

.active_object:hover {
transform: scale(1);
}

.active_object>.share {
display: block;
}

.active_object>.object_picture {
max-height: none;
width: 40%;
min-width: 40%;
height: max-content;
}

.active_object>.info_object {
margin-left: 40px;
}

.active_object>.info_object>.task_name {
font-family: "Raleway", serif;
font-size: 28px;
margin-top: 0;
}

.active_object>.info_object>.hide_object {
display: flex;
margin: 40px auto 0;
}

.active_object>.info_object>.object_text {
display: block;
}

.active_object>.info_object>.reveal_image {
display: block;
}

.active_object>.info_object>.mini_info {
text-align: center;
}

.open_picture {
cursor: pointer;
}

@media (max-width: 1240px) {
#main_block {
width: 900px;
}

.task {
width: calc(50% - 40px);
}

.active_object {
width: calc(100% - 40px);
}
}


@media (max-width: 950px) {

.title_block {
max-width: calc(100% - 40px);
margin-top: 120px;
}

#main_block {
width: 100%;
}


.search_block {
width: calc(100% - 40px);
}

#search {
width: 100%;
}

.task:hover {
transform: scale(1);
}
}

@media (max-width: 768px) {
.filter {
max-width: calc(100% - 20px);
margin: 5px;
}

#go_search {
min-width: 100px;
}

#search {
margin-right: 10px;
}

.name_filter {
border-width: 1.5px;
font-size: 16px;
}

.active_filter {
height: auto;
}

.task {
width: 100%;
margin: 0 0 60px;
}

.title {
font-size: 36px;
}

.active_object {
flex-direction: column;
}

.active_object>.object_picture {
width: 100%;
}

.active_object>.info_object {
margin: 0;
}

.author {
margin-top: 20px;
text-align: center;
}

.open_object {
display: flex;
margin: 40px auto 0;

}

.active_object>.open_object {
display: none;
}

.active_object>.info_object>.reveal_image {
text-align: center;
}

.info_object>.task_name {
text-align: center;
font-family: "Raleway", serif;
font-size: 22px;
margin-top: 20px;
}

.active_object>.info_object>.task_name {
margin-top: 20px;
}

.mini_info {
text-align: center;
}
}

@media (max-width: 420px) {
.filter_themes:hover>.name_filter {
min-width: 250px;
}
}