/*--------------------------------------/nullstyle/-------------------------------------------*/
*{
    padding: 0;
    margin: 0;
    border: 0;
}
*,*:before,*:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: before-box;
    box-sizing: border-box;
}
:focus,:active {outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside {display: block;}
    
html,body {
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 1;
    font-size: 14px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}
input,button,textarea {font-family: inherit;}
    
input::-ms-clear{display: none}
button{cursor: pointer;}
button::-moz-focus-inrer {padding: 0;border: 0;}
a,a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
ul,li {list-style: none;}
img {vertical-align: top;}
    
h1,h2,h3,h4,h5,h6 {font-size: inherit;font-weight: 400;}
/*--------------------------------------/nullstyle/-------------------------------------------*/
/*--------------------------------------/technical specifications/-------------------------------------------*/
.canvas{
    min-width: 100%;
    overflow: hidden;
}
.wrapper{
    max-width: 1140px;
    margin: 0px auto;
}
.cover {
    position: relative;
    z-index: 1;
}
.cover img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 1;
}
.top_image-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
/*--------------------------------------/technical specifications/-------------------------------------------*/
/*--------------------------------------/header/-------------------------------------------*/
.header {
}
.header__container {
    position: relative;
    max-width: 1440px;
    margin: 10px auto;
    z-index: 2;
}
.header__top {
    position: relative;
    height: 88px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__top-logo {
    font-family: Roboto;
    color: aliceblue;
    font-size: 20px;
    font-weight: 700;
    z-index: 100;
}
.header__top-logo img{
   padding: 0px 10px;
}
.header__top-menu {
    display: flex;
}
.header__top-menu a{
    font-family: Roboto;
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    text-shadow: 2px 2px 2px black;
}
.top-menu__items {
    display: flex;
}
.menu-item {
    padding: 10px;
}

/*--------------------------------------/header/-------------------------------------------*/
/*--------------------------------------/header-welcome/-------------------------------------------*/
.header__welcome {
}
.header__welcome-area {
    margin: 192px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.welcome-area__text {
}
.welcome-area__text1 {
    display: flex;
    font-family: Roboto;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0.18em;
    color: #ffffff;
}
.welcome-area__text1 .area__text1-1 {
    font-weight: 400;
}
.welcome-area__text1 .area__text1-2 {
    font-weight: 700;
    padding: 0px 0px 0px 0.28em;
}
.welcome-area__text2 {
    margin: 23px 0px 0px  0px ;
    font-family: Roboto;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 500;
}
.area__text2-1 {
    color: #ffffff;
}
.welcome-area__text3 {
    margin: 23px 0px 0px 0px;
    display: flex;
    font-family: Roboto;
    font-size: 22px;
    line-height: 1.2;
}
.area__text3-1 {
    font-weight: 400;
    color: #c2c2c2;
    margin: 0px 0.5em 0px 0px;
}
.area__text3-2 {
    font-weight: 500;
    color: #ffffff;
    margin: 0px 0.5em 0px 0px;
}
.area__text3-3 {
    font-weight: 400;
    color: #c2c2c2;
    margin: 0px 0.5em 0px 0px;
}
.area__text3-4 {
    font-weight: 500;
    color: #ffffff;
    margin: 0px 0.5em 0px 0px;
}
.area__text3-5 {
    font-weight: 500;
    color: #ffffff;
    margin: 0px 0.5em 0px 0px;
}
.area__text3-6 {
    font-weight: 500;
    color: #ffffff;
}
.header-area__buttons {
    margin: 23px 0px 220px 0px;
}
.header__button {
    display: flex;
}
.header__button a{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    width: 185px;
    height: 57px;
    background-color: #2196f3;
    font-family: Roboto;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
}
.header__button a:not(last-child){
    margin: 0px 22px 0px 0px;
}
.header__button a:hover {
    background-color: #e0e0e0;
    color: #5a5a5a;
    transition: 600ms;
}
/*--------------------------------------/header-welcome/-------------------------------------------*/
/*--------------------------------------/main/-------------------------------------------*/
.main {
    position: relative;
    z-index: 3;
    background-color: #fff;
}
.main__container {
    margin: 80px 0px 0px 0px;
    position: relative;
    z-index: 3;
    
}
.main__work-place {
    display: grid;  
    grid-template-areas: "header sidebar"  
                         "content sidebar";
    grid-template-columns: 860px 1fr;  
    grid-template-rows: 30px 1fr; 
    background-color: #fff;
}
.main__tech-place {
    grid-area: header;
    display: flex;
    align-items: center;
}
.search-box {
    width: 293px;
    height: 45px;
    background-color: rgba(0,0,0,0.0);
    border: 1px solid #d6d6d6;
    border-radius: 22.5px;
    display: flex;
}
.search-btn {
    background-color: #fff;
}
._icon-sistrix {
    width: 16px;
    height: 16px;
    color: #000;
    margin: 15px 10px 0px 10px;
}

.search-txt {
    font-family: Roboto;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: #d6d6d6;
    width: 240px;
}
.js_filter{
    margin: 0px 0px 0px 40px ;
}
.js_filter button {
    margin: 0px 0px 0px 10px;
    font-family: Roboto;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    color: #b0b0b0;
    background-color: #fff;
}
.showcases__examples {
    grid-area: content; 
    margin: 37px 0px 0px 0px;
    display: flex;
    max-width: 790px;
}
.slider {
    min-width: 1000px;
}
.example__card {
    position: relative;
    max-width: 263px;
    height: 229px;
    min-width: 253px;
}
.example__img {
    display: flex;
    justify-content: flex-end;
    height: 189px;
}
.example__img-1 {
    padding: 16px 16px 0px 0px;
}
.example__img-2 {
    padding: 16px 16px 0px 0px;
}
.example__img-3 {
    padding: 16px 16px 0px 0px;
}
.example__img-4 {
    padding: 16px 16px 0px 0px;
}
.example__img-5 {
    padding: 16px 16px 0px 0px;
}
.example__img-6 {
    padding: 16px 16px 0px 0px;
}
.example__img-7 {
    padding: 16px 16px 0px 0px;
}
.example__img-8 {
    padding: 16px 16px 0px 0px;
}
.example__img-9 {
    padding: 16px 16px 0px 0px;
}
.example-bts {
    width: 22px;
    height: 22px;
    background-color: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4);
    border-radius: 50%;
    margin: 0px 12px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
._icon-heart {
    color: #000;
    margin: 3px 3px 0px;
}
.example-share {
    width: 22px;
    height: 22px;
    background-color: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
._icon-share {
    color: #000;
    margin: 3px 3px 0px;
}
.link__photographer-1 {
    position: absolute;
    bottom: 24px;
    right: 10px;
}
.link__photographer-2 {
    position: absolute;
    bottom: 24px;
    right: 10px;
}
.link__photographer-3 {
    position: absolute;
    bottom: 24px;
    right: 10px;
}
.link__photographer-4 {
    position: absolute;
    bottom: 24px;
    right: 10px;
}
.link__photographer-5 {
    position: absolute;
    bottom: 24px;
    right: 10px;
}
.link__photographer-6 {
    position: absolute;
    bottom: 24px;
    right: 10px;
}
.link__photographer-7 {
    position: absolute;
    bottom: 24px;
    right: 10px;
}
.link__photographer-8 {
    position: absolute;
    bottom: 24px;
    right: 10px;
}
.link__photographer-9 {
    position: absolute;
    bottom: 24px;
    right: 10px;
}
.example__text {
    padding: 11px 0px 0px 10px;
    height: 40px;
}
.example__link {
    color: #000;
}
.example__link:hover {
    text-decoration: underline;
}
._icon-map-marker {
    margin: 0px 10px;
}
/* Слайдер */
.slick-slider{}
/* Слайдер запущен */
.slick-slider.slick-initialized{}
/* Слайдер с точками */
.slick-slider.slick-dotted{}
/* Ограничивающая оболочка */
.slick-list {
    overflow: hidden;
    margin: 0px 0px 0px -45px;
    width: 760px;
}
/* Лента слайдов */
.slick-track{
    display: flex;
}
/* Слайд */
.slick-slide{
    width: 840px;
}
/* Слайд активный (показывается) */
.slick-slide.slick-active{}
/* Слайд основной */
.slick-slide.slick-current{}
/* Слайд по центру */
.slick-slide.slick-center{}
/* Клонированный слайд */
.slick-slide.slick-cloned{}
/* Стрелка */
.slick-arrow{
    position: absolute;
    top: -55px;
    margin: 0px 0px 0px 10px;
    font-family: Roboto;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    color: #b0b0b0;
    background-color: #fff;
}
/* Стрелка влево */
.slick-arrow.slick-prev{
    left: 40%;
}
/* Стрелка вправо */
.slick-arrow.slick-next{
    left: 50%;
}
/* Стрелка не активная */
.slick-arrow.slick-disabled{}
/* Точки (булиты) */
.slick-dots{}
.slick-dots li{}
/* Активная точка */
.slick-dots li.slick-active{}
/* Элемент точки */
.slick-dots li button{}
/*Конкретный слайдер*/
.slider{
    position: relative;
    padding: 0px 50px;
}
.sidebare__menu {
    grid-area: sidebar; 
    width: 240px;
    height: 880px;
    background-color: #fff;
    position: relative;
    z-index: 4;
    margin: 0px 0px 0px 10px;
}
.sidebare__container {
    display: flex;
    flex-direction: column;
}
.sidebare__bts {
    width: 237px;
    height: 63px;
    background-color: #2196f3;
    box-shadow: 0px 3px 38px 0px rgba(0,0,0,0.27);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sidebare__link {
    font-family: Roboto;
    font-size: 16px;
    line-height: 19px;
    font-weight: 700;
    color: #ffffff;
}
.sidebare__bts:hover{
    background-color: #848484; 
    transition: 600ms;
}
.sidebare__tags {
    margin: 40px 0px 0px;
    display: flex;
    flex-direction: column;
}
.tags-container-titel {
    font-family: Roboto;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    color: #565656;
}
.tags-container-titel span{
    font-weight: 700;
}
.tags-container {
    margin: 21px 0px 0px;
    display: flex;
    flex-wrap: wrap;
}
.teg {
    background-color: rgba(33,150,243,0.0);
    border: 1px solid #2196f3;
    border-radius: 3px;
    margin: 0px 8px 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tags-container a {
    font-family: Roboto;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: #2196f3;
}
.tags-container a:hover{
    text-decoration: underline;
}
.teg1 {
    width: 83px;
    height: 36px;
}
.teg2 {
    width: 81px;
    height: 36px;
}
.teg3 {
    width: 125px;
    height: 36px;
}
.teg4 {
    width: 96px;
    height: 36px;
}
.teg5 {
    width: 110px;
    height: 36px;
}
.sidebare__popular {
    display: flex;
    flex-direction: column;
    margin: 40px 0px 0px ;
}
.popular-container-titel {
    font-family: Roboto;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    color: #565656;
}
.popular-container-titel span{
    font-weight: 700;
}
.popular-container {
    display: flex;
    flex-direction: column;
    margin: 23px 0px 0px ;
}
.pop__photographer a{
    font-family: Roboto;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 400;
    color: #a0a0a0;
    display: flex;
    align-items: center;
    margin: 12px 0px 0px;
}
.sidebare__meetup {
    display: flex;
    flex-direction: column;
    margin: 40px 0px 0px;
}
.meetup-container-titel {
    font-family: Roboto;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    color: #565656;
}
.meetup-container-titel span{
    font-weight: 700;
}
.meetup-container {
    display: flex;
    flex-direction: column;
}
.meetup__dety {
    display: flex;
    flex-direction: column;
}
.meetup-link {
    display: flex;
    flex-direction: column;
    margin: 5px 0px 0px;
}
.meetup-date {
    font-family: Roboto;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: #a0a0a0;
}
.meetup-name {
    color: #2196f3;
}
/*--------------------------------------/maim/-------------------------------------------*/
/*--------------------------------------/recommended/-------------------------------------------*/
.main__recommended {
    display: flex;
    flex-direction: column;
}
.recommended__title {
    font-family: Roboto;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 400;
    color: #565656;
}
.recommended__title span {
    font-weight: 700;
}
.recommended__plase {
    display: flex;
    justify-content: space-between;
    max-width: 840px;
    max-height: 400px;
}
.recommended__text {
    max-width: 240px;
    display: flex;
    flex-direction: column;

}
.recommended__text-title {
    font-family: Roboto;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    color: #565656;
    padding: 0px 10px 0px 0px;
}
.recommended__text-date {
    font-family: Roboto;
    font-size: 12px;
    line-height: 19px;
    font-weight: 400;
    color: #939393;
    padding: 10px 10px 10px 0px;
}
.recommended__buttom {
}
.recommened__bts-link {
    font-family: Roboto;
    font-size: 13px;
    line-height: 19px;
    font-weight: 700;
    color: #ffffff;
}
.recomend__bts-plase {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 121px;
    height: 44px;
    background-color: #2196f3;
    border-radius: 3px;
}
.recomend__bts-plase:hover{
    background-color: #848484;
    transition: 600ms;
}
.recommended__img {
}
.recomended__img-1 {
    position: relative;
    z-index: 4;
}
.recomended__img-2 {
    position: relative;
    margin: 0px 0px 0px -40px;
    z-index: 3;
}
.recomended__img-3 {
    position: relative;
    margin: 0px 0px 0px -40px;
    z-index: 2;
}
.recomended__img-4 {
    position: relative;
    margin: 0px 0px 0px -40px;
    z-index: 1;
}
/*--------------------------------------/recommended/-------------------------------------------*/
/*--------------------------------------/PHOTOBOX JOURNAL/-------------------------------------------*/
.main__journal {
    margin: 50px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 840px;
}
.journal__titel {
    font-family: Roboto;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 400;
    color: #565656;
}
.journal__titel span {
    font-weight: 700;
    margin: 0px 4px 0px 0px;
}
.journal__cards-plase {
    margin: 30px 0px 0px 0px;
    display: flex;
    flex-wrap: wrap;
    max-width: 840px;
    justify-content: space-between;
    align-items: center;
}
.journal__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 250px;
}
.journal__img {
}
.journal__img1 {
}
.journal__card-title {
    margin: 12px 0px 0px 0px;
    font-family: Roboto;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: #565656;
}
.journal__card-text {
    width: 230px;
    margin: 12px 0px 0px 0px;
    font-family: Roboto;
    font-size: 13px;
    line-height: 19px;
    font-weight: 400;
    font-style: italic;
    color: #848484;
    text-align: center;
}
.journal__cart-bts {
    margin: 12px 0px 0px 0px;
}
.journal__cart-bts a {
    font-family: Roboto;
    font-size: 13px;
    line-height: 19px;
    font-weight: 700;
    color: #ffffff;
}
.journal__link {
    margin: 12px 0px 0px 0px;
    width: 121px;
    height: 44px;
    background-color: #2196f3;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.journal__link:hover{
    background-color: #848484;
}
.journal__img2 {
}
.journal__img3 {
}
/*--------------------------------------/PHOTOBOX JOURNAL/-------------------------------------------*/
/*--------------------------------------/footer/-------------------------------------------*/
.footer__container {
    margin: 60px 0px 0px 0px;
    background-color: #353535;
}
.footer__block {
    display: flex;
    flex-direction: column;
    
}
.footer__block-top {
    margin: 45px 0px 0px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.footer__block-logo {
    font-family: Roboto;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 0px 0px 6px rgba(0,0,0,0.1);
    color: #414141;
    display: flex;
    align-items: center;
}
.footer__block-logo span {
    margin: 0px 0px 0px 10px;
}
.footer__Explore {
    display: flex;
    flex-direction: column;
    width: 540px;
}
.Explore__title {
    font-family: Roboto;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
}
.Explore__text {
    display: flex;
    justify-content: space-between;
}
.Explore__block {
    display: flex;
    flex-direction: column;
    font-family: Roboto;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: #a9a9a9;
}
.Explore__block_inside {
    margin: 0px 0px 6px 0px ;
}
.footer__Downladed {
    display: flex;
    flex-direction: column;
}
.Downladed__title {
    font-family: Roboto;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
}
.Downladed__block {
    display: flex;
    flex-direction: column;
}
.Downladed__number {
    font-family: Roboto;
    font-size: 72px;
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 0px 0px 6px rgba(0,0,0,0.1);
    color: #414141;
}
.Downladed__text {
    font-family: Roboto;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    text-shadow: 0px 0px 6px rgba(0,0,0,0.1);
    color: #474747;
}
.footer__bottom {
    margin: 30px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.footer__block1 {
    font-family: Roboto;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    text-shadow: 0px 0px 6px rgba(0,0,0,0.1);
    color: #474747;
}
.footer__block2 {
    font-family: Roboto;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    text-shadow: 0px 0px 6px rgba(0,0,0,0.1);
    color: #474747;
}
.footer__block2 ._icon-heart {
    color: #be2f2f;
}
/*--------------------------------------/foorer/-------------------------------------------*/
/*--------------------------------------//-------------------------------------------*/