@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;700;900&display=swap');
@import url(https://fonts.googleapis.com/earlyaccess/opensanshebrew.css);

body {
    direction: rtl;
    font-family: 'Open Sans Hebrew', sans-serif !important;
}

:root {
  --header-padding: 20px;
  --main-color: #022f60;
  --box-border: 1px solid #f0f0f0;
}

body a,
body a:focus,
body a:hover {
    color: var(--main-color);
}

ul {
    padding: 0;
}

ul li {
    list-style-type: none;
}

.main_title {
    color: #C9C9C9;
    font-size: 300%;
    font-family: 'Frank Ruhl Libre', serif;
    font-weight: 500;
}

 .s_title {
    color: var(--main-color);
    font-weight: 500;
}

#main_div {
    padding: 0 40px;
}

.arr_left {
    background: url(./../images/arr_left.svg) no-repeat;
    background-size: contain;
    cursor: pointer;
}

.refresh {
    background: url(./../images/refresh.svg) no-repeat;
    background-size: contain;
    cursor: pointer;
}

.facebook {
    background: url(./../images/facebook.svg) no-repeat;
    background-size: contain;
    cursor: pointer;
}

.title_warp {
    border-bottom: 1px solid #f0f0f0;
    /*padding-bottom: 7px;
    margin-bottom: 7px;*/
    margin-bottom: 20px;
    position: relative;
}

.title_warp .main_title {
    float: right;
}

.title_warp .s_title {
    float: left;
    font-size: 120%;
    margin-top: 28px;
}

/* ============= article/s ============= */

.s_article_title {
    position: absolute;
    font-weight: bold;
    color: black;
    left: 0;
    bottom: 15px;
}

.below_line {
  display: none;
}

.articles_main_title{
  font-size: 500%;
}

.article_col {
    margin-bottom: 25px;
}

.definition h2 {
    color: #022F60;
}

.definition_box {
    position: relative;
    border: solid 2px #e3e3e3;
}

.definition_box > * {
    padding: 15px 0;
    margin: auto;
}

.definition_name {
    font-weight: bolder;
    padding-right: 15px;
    border-left: solid 2px #e3e3e3;
}
.definition_name > h2 {
  font-weight: bold;
  font-size: 180%;
  font-family: "Frank Ruhl Libre";
}

.definition_examples {
  padding-right: 15px;
  font-size: 120%;
}

.definition_box .read_more {
    text-align: left;
    color: blue;
    font-weight: bold;
    padding-right: 15px;
    padding-left : 15px;
}


.definition h2 {
    padding: 10px 0;
}

.read_more .title_warp .arr_left {
    margin-top: 8px;
    margin-right: -10px;
}

.read_more > .link {
  padding-left: 20px;
  font-size: 120%;

}

/* ============= semantics & ales_bet ============= */

.distributed_column_div {
 column-count: 3;
}

.distributed_column_div p {
  margin: 0;
}

.distributed_column_div p a {
    color: #969696;
}

.alef_bet_main {
  margin-bottom: 100px;
  padding: 0;
}

.head_letter > h2 {
  font-weight: bold;
  font-size: 350%;
  font-family: "Frank Ruhl Libre";
  text-align: center;
}

.definition_examples.semantics_p, .words_letter_container {
  color: #969696;
  text-decoration: underline;
}

.blue_bold {
  font-weight: bolder;
  color: #022F60;
  font-size: 105%;
}

.grey_title {
  color: #969696;
  font-weight: bolder;
}

.semantics_search_text {
  font-size: 150%;
}

.semantics_search_icon {
  background: url(./../images/search.svg);
  background-size: contain;
  width: 47px;
  height: 47px;
}

.semantics_search_text_col {
  padding-right: 15px;
}

.semantics_example_row {
  margin-bottom: 25px;
}

.definition_box.semantics_box {
  border-width: 1px;
}

.semantics_box .definition_name{
  border-left-width: 1px;
}

/* ============= search results ============= */

#lettersbar {
  text-align: center;
}

#lettersbar_title > h2 {
  font-family: "Open Sans Hebrew";
}

#letters_list {
  word-wrap: break-word;
}

#letters_list li {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  font-family: "Frank Ruhl Libre";
  font-size: 200%;
  font-weight: bolder;
  padding: 0 20px;
}


.proverb {
  position: relative;
  padding: 20px;
  border: solid 2px #e3e3e3;
}

.proverb > .proverb_left_note {
  position: relative;
  /* float: left; */
  text-align: left;

  border-top: solid 2px #e3e3e3;
}

.proverb > .proverb_title {
  /* font-size: 150%; */
  padding-bottom: 20px;
  font-weight: bolder;
  font-family: "Frank Ruhl Libre";
}

.proverb_left_note > p {
  margin: 0;
  padding-top: 20px;
  font-weight: bold;
}


.letter_link {
  position: absolute;
  color: black;
}

.letter_link:hover {
  color: black;
}

.letter_item:hover , .letter_active {
  bottom: 25px;
  left: 10px;
}

.letter_link:hover , .letter_active > a.letter_link {
  font-size: 200%;
  text-decoration: none;
}

#home-tab.search_tab_link,
#profile-tab.search_tab_link,
#contact-tab.search_tab_link {
  border: 0;
}

.search_tab_link {
  position: relative;
  font-size: 350%;
  color: #969696;
  padding-right: 0;
  font-weight: bold;
  font-family: "Frank Ruhl Libre";
}

.search_tab_link > span {
  display: none;
  position: absolute;
  right: 35%;
  top: 70%;
  transform: rotate(-90deg);
}

.nav-tabs > li > .search_tab_link:focus {
  color: #022F60;
}
.search_tab_link:focus > span {
  display: inline;
}

.search_found_numb {
  color: #969696;
  font-size: 35%;
}

ul.search_paging {
  position: relative;
  left: 0;
  bottom: 20%;
  /* position: absolute;
  left: 4%;
  bottom: 10%; */
}

ul.search_paging li {
  display: inline;
  padding: 3px 10px;
  font-weight: bold;
  position: relative;
  float: left;
  left: 0;
}

ul.search_paging li:hover, ul.search_paging li.active {
  border: solid 1px #E3E3E3;
  cursor: pointer;

}

ul.search_paging li:hover a,  ul.search_paging li.active a{
  color: #022F60;
}

ul.search_paging li:focus {
  color: #022F60;
  border: solid 1px #E3E3E3;
}

ul.search_paging li a {
  color: #969696;
  text-decoration: none;
}

.grey_title.search_grey_title {
  font-weight: normal;
  font-size: 200%;
}

/* ============= ====== ============= */

.title_warp .arr_left {
    width: 9px;
    height: 15px;
    float: left;
    margin-top: 9px;
    margin-right: 10px;
}

.padder {
    padding: 7px;
}

#breadcrumbs {
    margin: 0;
    padding: 0;
    text-align: left;
}

#breadcrumbs li {
    display: inline-block;
    margin-right: 5px;
}

#breadcrumbs a:after {
    content: ">";
    padding-right: 5px;
}

#breadcrumbs a {
    color: #969696;
}

#breadcrumbs a.active {
    font-weight: bold;
}

#breadcrumbs a.active:after {
    display: none;
}


/* ============= header ============= */


header {
    background: var(--main-color);
    height: auto;
    color: #fff;
}

/*header .warp {
    margin: 0 20px;
}*/

header #sticky {
    position: fixed;
    width: 100%;
    background: #022F60;
    top: 0;
    padding: var(--header-padding);
    padding-bottom: 0;
    z-index: 10;
}

header #logo {
    width: 287px;
}

header #misad {
    margin-top: 60px;
    padding: var(--header-padding);
    position: relative;
    font-weight: 500;
    padding-bottom: 60px;
}

header #main_menu {
    float: left;
}

header #main_menu .ham {
    display: none;
}

header #main_menu li {
    display: inline-block;
    margin-right: 20px;
    position: relative;
}

header #main_menu li a {
    color: #fff;
}

header #main_menu li:hover .submenu {
    display: block;
}

header #main_menu .submenu {
   display: none;
   position: absolute;
   background: #022F60;
   padding: 4px 0;
   width: 200px;
   left: -60px;
}

header #main_menu li:last-child .submenu {
    left: -19px;
}

header #main_menu .submenu li {
    display: block;
    margin-right: 0;
    text-align: center;
}

#search_warp {
    position: relative;
    top: -73px;
}

#search_warp .tab {
    width: 120px;
    height: 40px;
    background: #e3e3e3;
    color: #848484;
    display: inline-block;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius:5px;
    cursor: pointer;
    font-size: 103%;
    margin-left: 5px;
    padding-top: 6px;
    cursor: pointer;
    position: relative;
    right: 43px;
}

#search_warp .tab.active {
    color: #5F5F5F;
    background: #fff;
}

#search_warp #search_box {
    background: #fff;
    width: 100%;
    border-radius: 35px;
    height: 70px;
    border: 0;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(240,240,240,1);
    -moz-box-shadow: 0px 3px 5px 0px rgba(240,240,240,1);
    box-shadow: 0px 3px 5px 0px rgba(240,240,240,1);
    color: var(--main-color);
    font-size: 150%;
    padding-right: 44px;
    outline: 0;
}

#search_warp #search_box::placeholder {
    color: var(--main-color);
}

#search_warp #search_btn {
    background: url(./../images/search.svg);
    background-size: contain;
    width: 47px;
    height: 47px;
    position: absolute;
    left: 14px;
    top: 50px;
    cursor: pointer;
}

/* ============= footer ============= */

footer {
    background: #f7f7f7;
    margin-top: 90px;
    padding: 50px 0;
}

footer .title {
    color: #000;
    font-weight: 700;
    margin-bottom: 10px;
}

footer li {
    margin-bottom: 5px;
}

footer li a {
    color: #000;
}

footer .soc {
    font-weight: 500;
}

footer .facebook {
    width: 25px;
    height: 25px;
    display: inline-block;
    position: relative;
    top: 7px;
    margin-left: 4px;
}

footer form input {
    width: 100%;
    display: block;
    margin-top: 5px;
    border: 1px solid #969696;
    padding: 5px;
}

footer form input[type="submit"] {
    background: var(--main-color);
    color: #fff;
    border: 0;
    font-weight: 600;
    cursor: pointer;
}

footer .line {
    margin: 40px 0;
    width: 100%;
    height: 1px;
    background: #969696;
}

footer .copr,
footer .copr2 {
    line-height: 50%;
}

footer .copr {
    font-weight: 500;
}

footer .copr2 {
    text-align: left;
}

/* ============= home page ============= */

.toper {
    margin-top: 55px;
}

.news_box {
    border: var(--box-border);
}

.news_box img {
    height: 137px;
    width: 100%;
}


.news_box .title {
    color: #000;
    font-size: 200%;
    font-family: 'Frank Ruhl Libre', serif;
    font-weight: 500;
}

.news_box .text {

}

.news_box .link,
.article_box .link,
.wordgame_box .link {
    color: var(--main-color);
    font-weight: 500;
    float: left;
}

.news_box .arr_left,
.article_box .arr_left,
.wordgame_box .arr_left {
    width: 6px;
    height: 12px;
    float: left;
    margin-top: 8px;
    margin-right: 8px;
}


.article_box {
    border: var(--box-border);
}

.article_box .date {
    font-weight: 700;
    margin-bottom: 3px;
}

.article_box .title {
    background: var(--main-color);
    font-size: 200%;
    font-family: 'Frank Ruhl Libre', serif;
    font-weight: 500;
    padding-right: 10px;
}

.article_box .title a {
    color: #fff;
}

.wordgame_box {
    border: var(--box-border);
    text-align: center;
    margin-bottom: 25px;
    padding: 7px;
}

.wordgame_box .refresh {
    width: 16px;
    height: 17px;
    float: right;
    margin-top: 8px;
    margin-left: 8px;
    position: relative;
    top: -4px;
}


.wordgame_box .change {
    text-align: right;
    display: block;
    color: var(--main-color);
    font-weight: 500;
}

.wordgame_box .image {
    height: 85px;
    width: auto;
    display: block;
    margin: 10px auto 0 auto;
}

.wordgame_box .title {
    color: var(--main-color);
    font-size: 150%;
    font-family: 'Frank Ruhl Libre', serif;
    font-weight: 500;
    margin: 10px 0;
}

.wordgame_box .title2 {
    font-weight: 700;
    margin-bottom: 3px;
}

/* ============= general content page ============= */


#general_content_page .s_title {
    font-size: 180%;
    font-weight: 300;
    margin-bottom: 20px;
}

.content {
    color: #000;
    text-align: justify;
}
