@import url(ads.inc.item.css);

/****************************************/

#ofr_main { padding: 60px 0 80px 0 }

#ofr_main > div {
    max-width: 1232px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

#ofr_main > div > div { flex: 0 0 auto; width: 50% }

#ofr_right { padding-left: 45px; box-sizing: border-box }

#ofr_left_top { display: flex; justify-content: flex-start; margin-bottom: 26px }

#ofr_cat {
    display: block;
    flex: 0 0 auto;
    height: 41px;
    background-color: #FF7043;
    border-radius: 21px;
    box-sizing: border-box;
    padding: 0 30px 0 15px;
    color: #fff;
    font: bold 14px/41px 'MainFont';
    text-transform: uppercase;
    text-decoration: none
}

body.dark #ofr_cat { color: #404040 }

#ofr_cat:before {
    content: '';
    width: 28px;
    height: 28px;
    float: left;
    margin: 7px 20px 7px 0
}

#ofr_cat[rel='1']:before { background: url(../../img/main/ads/cat1_sel.svg) center center / contain no-repeat }
#ofr_cat[rel='2']:before { background: url(../../img/main/ads/cat2_sel.svg) center center / contain no-repeat }
#ofr_cat[rel='3']:before { background: url(../../img/main/ads/cat3_sel.svg) center center / contain no-repeat }
#ofr_cat[rel='4']:before { background: url(../../img/main/ads/cat4_sel.svg) center center / contain no-repeat }
#ofr_cat[rel='5']:before { background: url(../../img/main/ads/cat5_sel.svg) center center / contain no-repeat }
#ofr_cat[rel='6']:before { background: url(../../img/main/ads/cat6_sel.svg) center center / contain no-repeat }
#ofr_cat[rel='8']:before { background: url(../../img/main/ads/cat8_sel.svg) center center / contain no-repeat }
#ofr_cat[rel='9']:before { background: url(../../img/main/ads/cat9_sel.svg) center center / contain no-repeat }
#ofr_cat[rel='10']:before { background: url(../../img/main/ads/cat10_sel.svg) center center / contain no-repeat }

body.dark #ofr_cat[rel='1']:before { background-image: url(../../img/main/ads/cat1_dark.svg) }
body.dark #ofr_cat[rel='2']:before { background-image: url(../../img/main/ads/cat2_dark.svg) }
body.dark #ofr_cat[rel='3']:before { background-image: url(../../img/main/ads/cat3_dark.svg) }
body.dark #ofr_cat[rel='4']:before { background-image: url(../../img/main/ads/cat4_dark.svg) }
body.dark #ofr_cat[rel='5']:before { background-image: url(../../img/main/ads/cat5_dark.svg) }
body.dark #ofr_cat[rel='6']:before { background-image: url(../../img/main/ads/cat6_dark.svg) }
body.dark #ofr_cat[rel='8']:before { background-image: url(../../img/main/ads/cat8_dark.svg) }
body.dark #ofr_cat[rel='9']:before { background-image: url(../../img/main/ads/cat9_dark.svg) }
body.dark #ofr_cat[rel='10']:before { background-image: url(../../img/main/ads/cat10_dark.svg) }

/**************************************/

#ofr_slide_btns { margin: 0 0 26px 0; overflow: hidden; height: 41px } 

#ofr_slide_btns > a {
    display: block;
    height: 41px;
    border: 1px solid #FF7043;
    border-radius: 21px;
    box-sizing: border-box;
    padding: 0 20px;
    min-width: 141px;
    text-align: center;
    font: bold 14px/41px 'MainFont';
    text-transform: uppercase;
    color: #FF7043;
    text-decoration: none 
}

#ofr_prev_btn { float: left; padding-left: 35px !important; background: url(../../img/main/ads/prev_ad.svg) left 14px center no-repeat }
#ofr_next_btn { float: right; padding-right: 35px !important; background: url(../../img/main/ads/next_ad.svg) right 14px center no-repeat }

body.dark #ofr_slide_btns > a { background-color: #404040 }

/**************************************/

#ofr_def_pic {
    height: 450px; 
    width: 616px;
    margin: 0 auto;
    background: url(../../img/main/ads/no_photo.jpg) center center no-repeat
}

#ofr_def_pic.gnd1 { background-image: url('../../img/main/ads/1no_photo.jpg') }
#ofr_def_pic.gnd2 { background-image: url('../../img/main/ads/2no_photo.jpg') }
#ofr_def_pic.gnd4 { background-image: url('../../img/main/ads/4no_photo.jpg') }
#ofr_def_pic.gnd8 { background-image: url('../../img/main/ads/8no_photo.jpg') }

#ofr_pics {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(../../img/loading_100x100_new.gif) center top 175px no-repeat
}

#ofr_pics > a {
    display: block; 
    height: 450px; 
    width: 616px;
    border-radius: 5px;
    cursor: pointer
}

#ofr_pics > a > img { 
    display: block; 
    height: 450px; 
    width: 616px;
    object-fit: cover;
    border-radius: 5px;
}

#ofr_pics_nav {
    height: 130px;
    width: 616px;
    margin-top: 19px;
    position: relative;
}

#ofr_pics_nav > div {
    height: 130px;
    width: 616px;
    display: flex;
    justify-content: flex-start;
    overflow: hidden
}

#ofr_pics_nav.centered > div { justify-content: center }

#ofr_pics_nav > div > div {
    flex: 0 0 auto;
    height: 130px;
    font-size: 0;
    text-wrap: nowrap
}

#ofr_pics_nav > div > div > a {
    display: inline-block;
    width: 123px;
    height: 130px;
    border-radius: 5px;
    font-size: 0     
}

#ofr_pics_nav > div > div > a + a { margin-left: 23px }

#ofr_pics_nav > div > div > a > img { display: block; width: 123px; height: 130px; object-fit: cover; border-radius: 5px }


#ofr_pics_prev, #ofr_pics_next {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    top: 50px;
    z-index: 10;
    box-shadow: rgba(0, 0, 0, 0.15) 0 0 3px 1px;
    background: #fff url(../../img/main/ads/next.svg) left 13px center no-repeat
}

#ofr_pics_nav.centered #ofr_pics_prev, #ofr_pics_nav.centered #ofr_pics_next { display: none }

#ofr_pics_prev.grayed, #ofr_pics_next.grayed { background-image: url(../../img/main/ads/next_disabled.svg) }

#ofr_pics_prev { left: -12px; transform: rotate(180deg); }
#ofr_pics_next { right: -12px; }

body.dark #ofr_pics_prev, body.dark #ofr_pics_next { background-color: #404040; background-image: url(../../img/main/ads/next_disabled.svg) }
body.dark #ofr_pics_prev.grayed, body.dark #ofr_pics_next.grayed { background-image: url(../../img/main/ads/next.svg) }

/**************************************/

#ofr_right_mid:first-child { margin-top: 67px }

#ofr_right_mid { 
    display: flex;
    flex-direction: column;
}

#ofr_name_loc {
    overflow: hidden;
    margin-bottom: 12px;
    min-height: 60px
}

#ofr_name {
    float: left;
    height: 42px;
    color: #434343;
    font: bold 28px/42px 'MainFont';
    margin: 0 25px 0 0;
    padding: 0
}

#ofr_name::first-letter { text-transform: uppercase }

body.dark #ofr_name { color: #c5c5c5 }

#ofr_loc {
    float: left;
    height: 26px;
    padding: 0 0 0 32px;
    margin: 8px 0;
    background: url(../../img/main/ads/place_big.svg) left center no-repeat;
    color: #737373;
    font: normal 21px/26px 'MainFont'
}


#del_fav_icon, #add_fav_icon, #total_favs_icon, #promo_icon {
    float: right;
    margin-left: 10px;
    width: 55px;
    height: 18px;
    padding-top: 42px;    
    text-align: center;
    color: #FF7043;
    font: bold 12px/18px 'MainFont';
    text-decoration: none
}

#del_fav_icon { background: url(../../img/main/ads/fav_del.svg) center top no-repeat }
#add_fav_icon, #total_favs_icon { background: url(../../img/main/ads/fav_add.svg) center top no-repeat }
#promo_icon { background: url(../../img/main/ads/advertise_icon.svg) center top no-repeat }

body.dark #add_fav_icon, body.dark #total_favs_icon { background-image: url(../../img/main/ads/fav_add_dark.svg) }
body.dark #del_fav_icon { background-image: url(../../img/main/ads/fav_del_dark.svg) }
body.dark #promo_icon { background-image: url(../../img/main/ads/advertise_icon_dark.svg) }

#del_fav_icon.processing, #add_fav_icon.processing { background: url(../../img/loading_24x24.gif) center top 3px no-repeat }


#ofr_text {
    margin: 0 0 40px 0;
    color: #434343;
    font: normal 16px 'MainFont';
    border-radius: 10px;
    background-color: #efefef;
    padding: 30px
}

#ofr_text a:link, #ofr_text a:visited, #ofr_text a:hover {
    display: block;
    margin: 10px 0 0 0;
    color: #434343;
    font: bold 16px 'MainFont';
    text-decoration: none
}

body.dark #ofr_text { color: #c5c5c5; background-color: #404040 }
body.dark #ofr_text a:link, body.dark #ofr_text a:visited, body.dark #ofr_text a:hover { color: #c5c5c5 }

#ofr_text::first-letter { text-transform: uppercase }

#ofr_contacts {
    height: 52px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 40px 0
}

#ofr_contacts > * { 
    flex: 0 0 auto; 
    display: block;
    height: 52px;
    border-radius: 10px;
    padding: 0 25px 0 60px;
    color: #fff;
    font: bold 16px/52px 'MainFont';
    text-decoration: none;
}

#ofr_contacts > * + * { margin-left: 30px }

#ofr_phone { background: #FF7043 url(../../img/main/ads/mobile.svg) left 20px top 12px no-repeat }
#ofr_email { background: #FF7043 url(../../img/main/ads/email.svg) left 15px top 15px no-repeat }

body.dark #ofr_phone, body.dark #ofr_email { color: #404040 }
body.dark #ofr_phone { background: #FF7043 url(../../img/main/ads/mobile_dark.svg) left 20px top 12px no-repeat }
body.dark #ofr_email { background: #FF7043 url(../../img/main/ads/email_dark.svg) left 15px top 15px no-repeat }

#ofr_msgrs { 
    min-height: 31px;
    overflow: hidden
}

#ofr_viber, #ofr_whatsapp, #ofr_telegram { 
    float: right;
    width: 30px; 
    height: 31px;
    margin-left: 24px
}

#ofr_viber { background: url(../../img/main/ads/viber_avg.svg) center center no-repeat }
#ofr_whatsapp { background: url(../../img/main/ads/whatsapp_avg.svg) center center no-repeat }
#ofr_telegram { background: url(../../img/main/ads/telegram_avg.svg) center center no-repeat }

body.dark #ofr_viber { background-image: url(../../img/main/ads/viber_avg_dark.svg) }
body.dark #ofr_whatsapp { background-image: url(../../img/main/ads/whatsapp_avg_dark.svg) }
body.dark #ofr_telegram { background-image: url(../../img/main/ads/telegram_avg_dark.svg) }

#ofr_edit {
    float: left;
    height: 33px;
    min-width: 78px;
    box-sizing: border-box;
    border-radius: 5px;
    background: #E6E6E6 url(../../img/mobile/edit.svg) right 8px center no-repeat;
    padding: 0 35px 0 8px;
    color: #737373;
    font: bold 14px/33px 'MainFont';
    text-align: center;
    text-decoration: none
}

body.dark #ofr_edit { background-color: #E6E6E6 }


#ofr_date_report {
    margin: 15px 0 0 0;
    height: 41px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 1px solid rgba(230,230,230,0.3);
    padding-top: 15px
}

#ofr_date_report > * { flex: 0 0 auto }

#ofr_date {
    flex: 0 0 auto;
    color: #434343;
    font: normal 16px 'MainFont';
    padding-left: 15px
}

body.dark #ofr_date { color: #c5c5c5 }

#ofr_date_report > div { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap }
#ofr_date_report > div > * + * { margin-left: 15px }

#total_views_icon, #ofr_report {
    flex: 0 0 auto;
    display: block;
    height: 15px;
    padding-top: 26px;
    text-align: center;
    color: #434343;
    font: bold 10px/15px 'MainFont';
    text-transform: uppercase;
    text-decoration: none 
}

#total_views_icon { width: 35px; background: url(../../img/main/ads/views.svg) center top no-repeat }
body.dark #total_views_icon { color: #c5c5c5; background: url(../../img/main/ads/views_dark.svg) center top no-repeat }

#ofr_report { width: 45px; background: url(../../img/main/ads/report.svg) center top no-repeat }
body.dark #ofr_report { color: #c5c5c5; background-image: url(../../img/main/ads/report_dark.svg) }

/**************************************/

#ofr_other_cat_ads { border-top: 6px solid #ECECEC }
body.dark #ofr_other_cat_ads { border-color: #4e4e4e }

#ofr_other_cat_ads > div {
    max-width: 1232px;
    padding: 32px 0;
    margin: 0 auto
}

#ofr_other_cat_ads > div > h2 {
    color: #434343;
    font: bold 28px 'MainFont';
    margin: 0;
    padding: 0 0 20px 0
}

body.dark #ofr_other_cat_ads > div > h2 { color: #c5c5c5 }

#ofr_view_other_cat_ads {
    margin: 40px 0 25px 0;
    display: flex;
    justify-content: center
}

#ofr_view_other_cat_ads > a {
    flex: 0 0 auto;
    display: block;
    min-width: 237px;
    border-radius: 5px;
    height: 50px;
    text-align: center;
    color: #fff;
    font: bold 18px/50px 'MainFont';
    text-decoration: none;
    background: linear-gradient(to right, #ED3554, #FF7043);
}

body.dark #ofr_view_other_cat_ads > a { color: #404040 }