/* Design */
div.Top {margin-right:auto;margin-left:auto;max-width:900px;}
.Top {
    color:#0076A3;
    font-weight:bold;
    text-align:center;
}
.Top a{text-decoration:none;}
.Top h1 {font-weight:bolder;color:#0076A3;}
@media only screen and (max-width:400px)
{
    .Top h1 {font-size:26px;}
}
.Top img {max-width:100%;width:auto;height:auto;}
#Top_Contact_Us {
    color:black;
    background-color:white;
    font-weight:bold;
    animation-name: contact_us_color;
    animation-duration: 15s;
    animation-iteration-count:infinite;
    padding:5px;
    text-align:center;
    font-size:20px;
    border:15px solid red;
    border-radius:10px;
    display:inline-block;
}
@keyframes contact_us_color {
10% {border-color:red;}
27% {border-color:orange;}
38% {border-color:yellow;}
50% {border-color:green;}
67% {border-color:blue;}
72% {border-color:purple;}
95% {border-color:violet;}
100% {border-color:red;}
}
@media only screen and (max-width:800px)
{
    #Top_Contact_Us {max-width:95%;}
    .Top {background-image:url("./logo-small.gif");padding-top:60px;}
}

div.Menu {height:auto;padding-top:3px;overflow:auto;margin:10px 0px 10px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;}
.Menu a {font-size:20px;font-weight:bold;display:block;text-decoration:none;background-color:#0076A3;color:white;border:1px solid #0076A3;padding:5px;margin: 4px;}
.Menu a:hover {background-color:white;color:#0076A3;}

.Main{margin-bottom:30px;}
.Main h2, .Main h3, .Main h1 {text-align:center;text-decoration:underline;}
.Bottom{text-align:center;background-color:#0076A3;color:white;padding:5px;}
.Bottom span.No_Wrapping {white-space:nowrap;}
.Footer{padding:10px;}
.Footer a {text-decoration:underline;color:blue;}
.Footer a:hover{font-weight:bold;}

div#Footer_Div_Accessibility_Box {float: left; display: block; width:110px; height:90px; border: 1px solid grey; padding:5px; margin:100px 15px 10px 15px; text-align:center;}
@media only screen and (max-width:350px)
{
    div#Footer_Div_Accessibility_Box {margin:15px;float:unset;}
}

.Bottom_Links {font-size:8px;color:#fffff9;}
.Bottom_Links a{font-size:8px;text-decoration:none;color:#fffff9;}


/* Font design across all pages */
.text_red {color:red;}
.text_blue {color:blue;}
.text_green {color:green;}
.text_decoration_none {text-decoration:none;}
h2.text_decoration_none {text-decoration:none;}
h3.text_decoration_none {text-decoration:none;}
.text_bold {font-weight:bold;}
.text_center {text-align:center;}
.text_size_22 {font-size: 22px;}
div.overflow_auto {overflow: auto;}



/* Main_Page catalog boxes */
#Main_Page_Div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width:1200px;/* Will block mroe than 3 child in a row */
    margin:auto;/* will center the div */
}
div.Main_Page_Box {display:block;overflow:auto;width:30%;max-width:400px;margin:10px auto 0px auto;padding:10px;}
div.Main_Page_Box:hover {background-color:whitesmoke;}
.Main_Page_Box h2 {text-align:center;}
.Main_Page_Box img {display:block;max-width:80%;width:auto;height:180px;margin:10px auto 50px auto;}
.Main_Page_Box a {text-decoration:none;display:table;margin:10px auto 10px auto;background-color:white;color:#0076A3;font-weight:bold;padding:10px;border:2px solid #0076A3;border-radius:10px;}
.Main_Page_Box a:hover {background-color:#0076A3;color:white;}

@media only screen and (max-width:860px)
{
div.Main_Page_Box {width:95%;max-width:unset;}
#Main_Page_Div {display: unset;flex-wrap: unset;justify-content: unset;}

}

/* Body and main tags */
body {direction:rtl;font-family:Arial, Helvetica, sans-serif;}
.Image_Float_Left {float:left;margin:20px;max-width:240px;height:auto;}
div.Image_Centered {text-align:center;}
div.Image_Centered img {max-height:200px;width:auto;}

@media only screen and (max-width:500px)
{
    .Image_Float_Left {float:unset;display:block;margin-left:auto;margin-right:auto;}
}

div.Beton_Left_Images {float:left;margin:20px;}
div.Beton_Left_Images img {max-width:200px;height:auto;margin-bottom:10px;}
div.Beton_Bottom_Gallery {text-align:center;background-color:#0000C0;overflow:auto;}
div.Beton_Bottom_Gallery img {max-height:160px;width:auto;}


/* Style for item boxes */
div.Product_Boxes {
    overflow:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.Product_Boxes_Box {padding:4px;margin:10px;border:1px solid grey;width:210px;min-height:300px;}
div.Product_Boxes h4 {text-align:center;text-decoration:underline;}
div.Product_Boxes_Image {width:100%;height:150px;text-align:center;}
div.Product_Boxes_Image img {width:auto;max-width:100%;max-height:100%;}



/* Gallery javascript!!! Important based on pumice mamad! */
#gallery_modal_box{
    display:none;
    position:fixed;
    overflow:auto;
    left:0;
    top:0;
    width:100%;
    height:100%;
    max-height:100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    z-index:2;
}
#gallery_modal_box_white {
    background-color:#F3F3F3;
    text-align:center;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    border: 1px solid #888;
    width:80%;
    display:block;
    overflow:auto;
}

#gallery_modal_box_img {max-width:90%;max-height:90%;height:auto;}
#gallery_modal_box_close_button{color:#aaaaaa;float:left;font-size:48px;font-weight:bold;padding-left:20px;}
#gallery_modal_box_close_button:hover, #site_menu_close_button:focus{color:#000;text-decoration:none;cursor:pointer;}
#gallery_modal_box_close_button {cursor:pointer;color:red;}
#gallery_modal_box_close_button:hover {font-weight:bold;}
img.Enlarge_Image {cursor:zoom-in;}


/**************************************
*** Design permanent side links box ***
***************************************/
div.permanent_side_links_box {
    position: fixed;
    top:50px;
    left:0px;
    background-color:#ebe9e9;
    padding: 2px;
    border-radius: 0px 10px 10px 0px;
}
div.permanent_link_box img {
    width: 40px;
    height:40px;
    border-radius: 10px 10px 10px 10px;
    display:block;
    padding:3px;

}


/* For mamad.html */
.Oref_Message_Box{width:90%;max-width:500px;border:1px solid black;overflow:auto;padding:5px auto 5px auto;margin:5px auto 5px auto;}
.Oref_Message_Box img {display:block;float:left;margin:5px;}

div.mamad_info_box 
{
overflow:auto;
margin-bottom:20px;
}
.mamad_info_box div 
{
width:45%;
float:right;
text-align:right;
padding:5px;
border:1px solid black;
margin:5px;
overflow:auto;
}
@media only screen and (max-width:500px)
{
    .mamad_info_box div {width:unset;float:unset;}
}

table.mamad_products_table
{
    border:1px solid black;

    padding:3px;
    border-collapse:collapse;/*Mehaber gvulot kfulim shel table+td*/
}
.mamad_products_table td
{
vertical-align:top;
border:1px solid black;
padding:3px;
margin:3px;
}
.mamad_products_table tr:hover 
{
    background-color:#f5f5f5;
}
.mamad_products_table img
{
    width:100%;
    max-width:180px;
    min-width:70px;
    height:auto;
    margin:3px;
    cursor:zoom-in;
}



/* Sale box - on page carton.html */
.Sale_Box {max-width:600px;border:1px solid black;padding:3px;margin:35px auto 20px auto;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.Sale_Box img {float:left;}
.Sale_Box_Red {color:red;}
.Sale_Box_Black {color:black;}



/********************************
******* for pumis.html ********
********************************/
/* Style for item boxes */
div.Product_Boxes {
    overflow:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.Product_Boxes_Box {padding:4px;margin:10px;border:1px solid grey;width:210px;min-height:300px;}
div.Product_Boxes h4 {text-align:center;text-decoration:underline;}
div.Product_Boxes_Image {width:100%;height:150px;text-align:center;}
div.Product_Boxes_Image img {width:100px;height:auto;max-width:100%;max-height:100%;}



/********************************
******* for ytong.html ********
*********************************/
div.Ytong_Product_Boxes {
    overflow:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.Ytong_Product_Boxes_Box {padding:4px;margin:10px;border:1px solid grey;width:210px;min-height:300px;}
div.Ytong_Product_Boxes h4 {text-align:center;text-decoration:underline;}
div.Ytong_Product_Boxes_Image {width:100%;height:150px;text-align:center;}
div.Ytong_Product_Boxes_Image img {width:auto;max-width:100%;max-height:100%;}
/* Ytong midot boxes */
div.Ytong_Midot_Boxes 
{
    overflow:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.Ytong_Midot_Boxes div {border:1px black solid; min-width:160px;height:auto;padding:15px;margin:10px;}