:root { --main-bg-color: #EAEAEA; --main-font-color: #2b2b2b }

body { font-family: 'Barlow', sans-serif; padding: 0; margin: 0; font-size: 25px; background-color: var(--main-bg-color); color: var(--main-font-color) }
a { text-decoration: none; color: inherit }
h3 { margin-top: 10px; margin-bottom: 10px }


input, textarea, select { width: 338px; line-height: 50px; border: 1px solid #45aaf1; margin-left: 35px; font-size: 22px; padding: 0 10px; background-color: white; color: #2b2b2b; box-sizing: content-box; border-radius: 2px; font-family: 'Barlow', sans-serif }
select { height: 50px }
textarea { line-height: 25px; padding: 10px; font-size: 20px; font-family: 'Barlow', sans-serif; height: 250px }

.std_btn { background-color: #45aaf1; font-size: 20px; padding: 8px 34px; color: white; cursor: pointer; transition: .3s; line-height: 22px; }
.std_btn:hover { text-shadow: 0 0 .65px white, 0 0 .65px white; }

.edit_icon1 { position: absolute; right: 5px; top: 5px; cursor: pointer; width: 38px; cursor: pointer }
.delete_icon1 { position: absolute; right: 5px; top: 5px; cursor: pointer; width: 20px; cursor: pointer }
.delete_icon2 { position: absolute; right: 56px; top: 14px; cursor: pointer; width: 20px; cursor: pointer }

/*Menu*/
.top_and_main_menu { font-size: 25px; padding-top: 20px; overflow: hidden; padding-bottom: 25px; }
/* must be padding-top and not margin-top so that when showing gallery image popup and we make this fixed it stays in same place*/
.main_menu { float: right; margin-right: 28px; line-height: 28px; }
.main_menu img { vertical-align: middle; }
.main_menu .about { margin-right: 7px }
.main_menu .menu_logo { margin-left: 18px; cursor: pointer; height: 28px; width: 25px; float: right; background: url('/images/menu_logo.png'); }
.side_menu { display: none; position: fixed; right: 0; top: 0; background-color: #eeeeee; z-index: 2; width: 240px; height: 100% }
.fb_logo { height: 28px; width: 27px; float: right; background: url('/images/fb_logo.png'); margin-left: 2px }
.fb_logo:hover { background: url('/images/fb_logo_mo.png'); }
.email_logo { height: 28px; width: 27px; float: right; background: url('/images/email_logo.png'); margin-left: 2px }
.email_logo:hover { background: url('/images/email_logo_mo.png'); }
.instagram_logo { height: 28px; width: 27px; float: right; background: url('/images/instagram_logo.png'); margin-left: 2px }
.instagram_logo:hover { background: url('/images/instagram_logo_mo.png'); }
.side_menu .padd_top { width: 100%; height: 88px }
.side_menu .cat_line { line-height: 40px; padding-left: 40px; font-size: 21px; color: black; }
.side_menu .cat_line:hover { text-shadow: 0 0 .3px black, 0 0 .3px black; }
.side_menu .main_menu { font-size: 18px; margin-top: 20px; }
.top_menu { float: left; padding-left: 44px; line-height: 28px; }
.top_menu .cat_line { float: left; padding-right: 44px; }
.top_menu .cat_line img { cursor: pointer }
.top_menu .cat_line:hover { text-shadow: 0 0 .3px black, 0 0 .3px black; }
.top_menu_mobile { display: none }
.edit_social { cursor: pointer; height: 28px; float: left; padding-right: 8px; }
/*End Menu*/
/*Home Page*/
.mobile_content { display: none }
.home_page { margin-top: -47px; }
.layout { position: relative; min-height: 800px; margin: auto; top: 40px; }
.layout div img { width: 100% }
.layout div img.edit_icon1 { width: 38px; }
/*.layout div:hover img { -webkit-transform: scaleX(-1); transform: scaleX(-1); transition: 0.4s }*/
.layout .logo { position: absolute; font-size: 200px /*5vw*/; left: 120px; display: none; font-family: helvetica,'Barlow', sans-serif; font-weight: 100 }
/*Note: top is calculated from img6 in js*/
.layout .cat { font-size: 99px; line-height: 99px }
.layout .cat1 { position: absolute; left: 740px; top: 620px }
.layout .cat2 { position: absolute; left: 120px; top: 2120px }
.layout .cat3 { position: absolute; left: 2060px; top: 1480px }
.layout .cat4 { position: absolute; left: 4300px; top: 300px; }
.layout .cat5 { position: absolute; left: 3400px; top: 988px }
.layout .img1 { position: absolute; left: 120px; top: 1420px; width: 624px; height: 628px; }
.layout .img2 { position: absolute; left: 745px; top: 783px; width: 632px; height: 636px; }
.layout .img3 { position: absolute; left: 1378px; top: 1420px; width: 620px; height: 840px; }
.layout .img4 { position: absolute; left: 1378px; top: 2245px; width: 620px; height: 740px; }
.layout .img5 { position: absolute; left: 2000px; top: 780px; width: 620px; height: 640px; }
.layout .img6 { position: absolute; left: 2780px; top: 100px; width: 428px; height: 428px; }
.layout .img7 { position: absolute; left: 2560px; top: 1900px; width: 660px; height: 940px; }
.layout .img8 { position: absolute; left: 3400px; top: 100px; width: 700px; height: 680px; }
.layout .img9 { position: absolute; left: 3400px; top: 1140px; width: 556px; height: 820px; }
.layout .img10 { position: absolute; left: 3400px; top: 1960px; width: 556px; height: 552px; }
.layout .img11 { position: absolute; left: 4448px; top: 460px; width: 552px; height: 928px; }
.layout .img12 { position: absolute; left: 4300px; top: 1560px; width: 700px; height: 620px; }
.layout .img13 { position: absolute; left: 4300px; top: 2320px; width: 412px; height: 420px; }

.hp_cat_img_mo { display: none }

/*End Home Page*/
/*Category Page*/
.cat_page, .pop_cat_outer { margin: auto; width: calc(100% - 88px); padding-top: 13px }
.cat_page .go_home { font-size: 16px; line-height: 14px; margin-bottom: 20px }
.cat_page_cat_title { font-size: 50px; margin-bottom: 30px }
.cat_page .block { width: 95%; margin: auto; margin-bottom: 20px }
.cat_page .col1 .block { margin-left: 0 }
.cat_page .col3 .block { margin-right: 0 }
.cat_page .name { font-size: 25px }
.cat_page .description { font-size: 20px }
.cat_page .columns { display: flex; justify-content: space-between }
.cat_page .column { width: 33.33%; }
.cat_page .img { position: relative; }
.cat_page .pImage { width: 100%; cursor: pointer }
.create_new_project { margin-bottom: 20px; font-size: 20px; }
.create_new_project span { cursor: pointer; transition: .3s; }
.create_new_project span:hover { text-shadow: 0 0 .3px black, 0 0 .3px black; }
.uploading_project_image_wait { text-align: center; color: green; }
.uploading_project_image_wait div { display: none; }

#sortable_projects { list-style-type: none; margin: 0; padding: 0; margin-bottom: 30px; }
#sortable_projects li { line-height: 30px; border: 1px solid #45aaf1; font-size: 20px; padding: 0 10px; margin-bottom: 10px; }
#sortable_projects li span { position: absolute; margin-left: -1.3em; }

/*popup overrides*/
/*.mfp-bg { background: white; opacity: 1; pointer-events: none; }
.mfp-title { color: black }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #000 }
.mfp-figure::after { box-shadow: none }
.mfp-wrap { pointer-events: none; }
.mfp-container { pointer-events: none; }
.top_and_main_menu, .pop_cat_outer, .mfp-arrow, .mfp-content { pointer-events: all }
.mfp-zoom-out-cur, .mfp-zoom-out-cur { cursor: default }*/

/*Gallery*/
.gallery { display: none /*flex*/; margin-top: 20px; height: calc(100vh - 100px); }
.project_image img { max-width: 100%; max-height: 100%; /*vertical-align: middle;*/ }
.go_left_div { width: 90px; text-align: center; position: relative }
.go_right_div { width: 90px; text-align: center; position: relative }
.gallery_center { width: 100% /*calc(100% - 180px)*/; }
.gallery_project { display: none; height: 100% }
.project_image { display: none; height: 100%; }
.gallery_center .close { cursor: pointer; float: right; font-weight: bold; user-select: none; color: #a8a8a8 }
.gallery_center .close:hover { color: #797979 }
.gallery_center .image_and_text { width: max-content; margin: auto; max-width: 100%; height: calc(100vh - 180px); }
.gallery_center .image_and_text td { height: calc(100vh - 180px); }
/*End Category Page*/
/*About Page*/
.about_page .noa_yarkoni { width: 68%; margin: auto; font-size: 60px; margin-top: 30px; }
.about_page .editing_options { width: 68%; margin: auto; font-size: 18px; height: 22px }
.about_page .editing_options .a { }
.about_page .image_and_text { width: 68%; margin: auto; }
.about_page .image_and_text .image { width: 50%; position: relative }
.about_page .image_and_text .image .about_img { width: 100% }
.about_page .image_and_text .empty_col { width: 86px }
.about_page .image_and_text .text { width: 45%; line-height: 28px; position: relative; font-size: 20px }
/*End About Page*/

/*Contact Page*/
.contact_page .noa_yarkoni { width: 68%; margin: auto; font-size: 60px; margin-top: 30px; }
.contact_page .editing_options { width: 68%; margin: auto; font-size: 18px; height: 22px }
.contact_page .editing_options .a { }
.contact_page .image_and_text { width: 68%; margin: auto; }
.contact_page .image_and_text .image { width: 50%; position: relative }
.contact_page .image_and_text .image .contact_img { width: 100% }
.contact_page .image_and_text .empty_col { width: 86px }
.contact_page .image_and_text .text { width: 45%; line-height: 28px; position: relative; font-size: 20px }
/*End Contact Page*/


.popup_overlay { position: fixed; width: 100%; opacity: 0.1; top: 0px; margin: 0px; min-height: 200px; height: 100%; background-color: #000; display: none }
/*Login popup*/
.std_pop_up { display: none; background-color: #fff; width: 670px; padding: 25px; overflow-y: auto; position: fixed; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px solid #45aaf1; z-index: 200; }
.std_pop_up .aa { margin-bottom: 70px; font-weight: bold }
.std_pop_up .aa .close { float: right; cursor: pointer }
.std_pop_up input { background-color: var(--main-bg-color) }
.std_pop_up td { padding-bottom: 20px }
.std_pop_up .btn_line { float: right; margin-top: 70px; }

.del_cat { cursor: pointer; margin-left: 10px; font-weight: bold }

/*end login popup*/
/*about/contact popup*/
.edit_text_popup { width: 1000px; height: 85% }
/*.edit_text_popup textarea { height: 600px; width: 600px; line-height: 25px }*/
.std_pop_up.edit_text_popup .btn_line { margin-top: 5px }
.edit_text_popup .tox.tox-tinymce { width: 800px; }
/*end about/contact popup*/

/*edit project popup*/
.edit_project_popup textarea { height: 300px; width: 440px; line-height: 25px }
.std_pop_up.edit_project_popup .btn_line { margin-top: 5px }
.eio { overflow-x: auto; }
#ExistingImages { height: 100px; width: max-content; }
#ExistingImages .pifediv { float: left; margin-right: 10px; position: relative; }
#ExistingImages .pifediv img, #ExistingImages .pifediv video { max-width: 125px; max-height: 125px }

/*end edit project popup*/


/*Datatables overload*/



/*MOBILE*/
@media (max-width: 812px) {
    .top_and_main_menu { margin-bottom: 25px; }
    .top_menu { display: none }
    .main_menu .about { display: none }
    .desktop_content { display: none }
    .top_menu_mobile { display: block; float: left; line-height: 22px; font-size: 34px; margin-left: 10px }
    .main_menu { margin-right: 10px }
    .mobile_content { display: block; margin: 10px; }
    .mobile_content .cat_name { text-align: center; font-size: 23px; margin-bottom: 20px }
    .cat_page .columns { display: block }
    .cat_page_cat_title { font-size: 30px }
    .cat_page .column { width: 100% }
}

@media (max-width: 370px) {
    .top_menu_mobile { font-size: 27px; }
}