/* Design */
.Top {
    color:darkblue;
    text-align:center;
}
.Top img {max-width:100%;width:auto;height:auto;}
#Top_Contact_Us {
    color:black;
    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 (min-width:400px)
{
    #Top_Contact_Us {width:30%;}
}
div.Top div#YDF_Side {float:left;padding:10px;text-align:center;margin-bottom:30px;}
@media only screen and (max-width:500px)
{
    div.Top div#YDF_Side {float:unset;margin-bottom:unset;}
}

div.Menu {height:auto;background-color:darkblue;vertical-align:middle;padding-top:3px;padding-bottom:10px;margin:10px 0px 10px 0px;}
.Menu a {font-size:20px;font-weight:bold;display:inline;text-decoration:none;color:white;padding:10px;margin: 20px 3px 20px 0px;white-space:nowrap;}
.Menu a:hover {background-color:white;color:darkblue;}

.Main{margin-bottom:30px;}
.Main h2, .Main h3, .Main h1 {text-align:center;text-decoration:underline;}
.Bottom{text-align:center;background-color:darkblue;color:white;padding:5px;}
.Footer{padding:10px;font-size:13px;}
.Footer p {font-size:13px;}
.Footer a {text-decoration:underline;color:red;}
.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;}


/**************************************
*** Design permanent side links box ***
***************************************/
div.permanent_side_links_box {
    position: fixed;
    top:150px;
    left:0px;
    padding: 2px;
    border-radius: 0px 10px 10px 0px;
}
div.permanent_link_box img {
    width: 35px;
    height:35px;
    border-radius: 10px 10px 10px 10px;
    display:block;
    padding:10px;
    background-color:#ebe9e9;
    margin-left:0px;
    margin-right:auto;
}
div.permanent_link_box img#back-to-e10 {
  width: 100px;
  height:auto;
  transition: filter 0.3s ease;  /* Changes with hover to oragne with time */
}
div.permanent_link_box img#back-to-e10:hover {
  filter: sepia(1) hue-rotate(-20deg) saturate(500%);
}



/******************************************************************************************
******************************* Global Elemetns style *************************************
*******************************************************************************************/

body { 
    direction:rtl;
    background-color:white;
    font-family:Arial,Helvetica,sans-serif;
}


div.Main p, div.Main li { font-size:20px; }

img { border:0px; }

span.No_Wrap {white-space:nowrap;}

/* Images float and divs */
.Img_Float_Left{float:left;margin:20px;}
.Img_Float_Right{float:right;margin:20px;}
img.Img_Center{display:block;margin-right:auto;margin-left:auto;}
div.Img_Center{text-align:center;margin:10px;}
div.Img_Center img{margin:10px auto 10px auto;}

@media only screen and (max-width: 500px)
{
    .Img_Float_Right, .Img_Float_Left {float:unset;max-width:100%;height:auto;display:block;margin-right:auto;margin-left:auto;}
    div.Img_Float_Left {text-align:center;}
    div.Img_Float_Right {text-align:center;}
    .Img_Center img, img.Img_Center, img.Img_Float_Left, img.Img_Float_Right {float:unset;max-width:100%;height:auto;display:block;margin-right:auto;margin-left:auto;}
}

/* Images sizes */
.Max_Image_Size_120 { width:120px;height:auto; }
.Max_Image_Size_140 { width:140px;height:auto; }
.Max_Image_Size_150 { width:150px;height:auto; }
.Max_Image_Size_180 { width:180px;height:auto; }
.Max_Image_Size_200 { width:200px;height:auto; }
.Max_Image_Size_240 { width:240px;height:auto; }

.Max_Image_Height_160 { height:160px;width:auto; } 
.Max_Image_Height_180 { height:180px;width:auto; } 
.Max_Image_Height_200 { height:200px;width:auto; } 
.Max_Image_Height_240 { height:240px;width:auto; } 
.Max_Image_Height_280 { height:280px;width:auto; } 
.Max_Image_Height_300 { height:300px;width:auto; } 
.Max_Image_Height_360 { height:360px;width:auto; } 
.Max_Image_Height_500 { height:500px;width:auto; } 


/* Font design across all pages */
.text_red {color:red;}
.text_blue {color:blue;}
.text_green {color:green;}
.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;}


/******************************************************************************************
******************************* Design for pages ******************************************
******************************************************************************************/


/*********************************
******* for red-block.html ******
*********************************/
.red-power-block-container {min-height:320px;overflow:auto;margin:auto;}
.red-power-block-container h4 {text-align:center;text-decoration:underline;overflow:auto;}
.red-power-block-box {width:230px;height:300px;float:right;border: 1px solid black;padding:3px;margin:5px;}
.red-power-block-box img {max-width:160px;height:auto;margin-right:auto;margin-left:auto;display:block;}

div.red_power_block_gallery {
    overflow:auto;
    text-align:center;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.red_power_block_gallery div {max-width:300px;min-width:180px;width:30%;height:auto;border:1px solid black;margin:10px;padding:10px;}
.red_power_block_gallery img {width:100%;height:auto;cursor:zoom-in;}



/********************************
******* 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;}



/********************************
******* for caveret.html ********
*********************************/
/* Gallery products at bottom of the page. */
div.Caveret_Gallery {overflow:auto;display:flex;flex-wrap:wrap;justify-content:center;}
div.Caveret_Gallery div.Caveret_Gallery_Box{width:250px;border:1px solid black;padding:3px;margin:4px;}
div.Caveret_Gallery div.Cavert_Gallery_Pic_Div{min-height:150px;}
div.Caveret_Gallery h4 {text-align:center;}
div.Caveret_Gallery img {max-width:120px;height:auto;border-radius:10px;display:block;margin:auto;}


/* For mamad.html */
div.mamad_info_box 
{
overflow:auto;
margin-bottom:20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.mamad_info_box div 
{
width:30%;
text-align:right;
padding:5px;
border:1px grey solid;
margin:5px;
overflow:auto;
}
@media only screen and (max-width: 1100px)
{
    .mamad_info_box div{width:100%;margin-right:auto;margin-left:auto;}
}

table.mamad_products_table
{
    border:1px solid black;
    margin:3px;
    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
{
    max-width:100%;
    width:160px;
    height:auto;
    margin:3px;
    cursor:zoom-in;
}
@media only screen and (max-width: 600px)
{
    .mamad_products_table img {width:auto;}
}

div.Oref_Box {border:1px solid grey;max-width:450px;vertical-align:middle;overflow:auto;padding:5px;margin:3px auto 3px auto;}
div.Oref_Box img{float:left;}



/********************************
******* 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:auto;max-width:100%;max-height:100%;}



/**************************************************
******* for gallery at bottom of the pages ********
***************************************************/
/* 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;margin: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;}
img.Enlarge_Image {cursor:zoom-in;}



/**************************
******* for ydf.html ******
***************************/
/* For the english part */
div.Ydf_English {direction:ltr;text-align:left;}



/**************************
******* for sale box ******
******* in many pages *****
***************************/
div.Sale_Box {max-width:900px;border:1px solid black;box-shadow:5px 10px 18px #888888;overflow:auto;padding:10px;margin:10px auto 30px auto;}
div.Sale_Box img {float:left;margin:10px;}
p.Sale_Box_Red {color:red;}
p.Sale_Box_Black {color:black;}
@media only screen and (max-width:500px)
{
    div.Sale_Box img {margin:3px;}
}
@media only screen and (max-width:400px)
{
    div.Sale_Box img {float:unset;margin:auto;}
}