/* @import url('https://fonts.googleapis.com/css?family=Arial&display=swap'); */

/* This CSS changes with screen sizes*/
body							{font-size: 115%;}
.category-panel					{font-size:70%; height: 160px; width: 120px; }
.category-image					{height: 120px; width: 120px; }
.home-page-image				{width: 1000px; height: 606px;}
.main-square-image				{width: 500px; height: 500px;}
/*.logo							{width: 400px; height: 82px;}*/
.logo							{width: 400px; height: 150px;}
.feature-box 					{margin: 10px; width: 30%; height: 250px;}


h1                            {font-size: 150%;}
h2                            {font-size: 115%;}
h3							  {font-size: 90%;}
p 														{font-size:90%;}
li                            {font-size:90%;}


.bodytext                     {font-size:90%;}
.logotext											{font-size:68%;}
.libig						  {font-size: 120%;}
.main-menu-button             {font-size:85%;}
.banner-promo-outer           {font-size:90%;}

.category-menu-text           {font-size:90%;} 
.category-menu-button-back    {font-size:60%; width:9%;}
.category-menu-button         {font-size:55%; width:9%;}
.address-box-top              {font-size:120%;}
.address-box-bottom           {font-size:65%}
.info_box_top                 {font-size:90%;}
.info_box_bottom              {font-size:90%;}

.top-block-inner              {max-width:1050px; width: 48%;}

.social-box-outer             {width:48%;}
.social-box-left              {width:40%; font-size: 70%;  }
.social-box-right             {width:50%;}
.payment-methods-box          {width:48%;}
.geo-plugin                   {font-size:90%;}			

/* This CSS does not change with different screen sizes */

.feature-row {
  display: flex;
  justify-content: center; /* or space-between, space-around */
  gap: 20px; /* space between boxes */
  flex-wrap: wrap; /* allow wrapping on small screens */
}

.feature-box {
  margin: 10px;
  width: 30%;
  height: 250px;
  background-color: white; /*;*/
  border-radius: 15px;
  box-shadow: 3px 3px 5px #999;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;  
  color: rgba(0, 0, 255, 1);
  font-family: sans-serif;
  box-sizing: border-box;
}



body                          {font-family: 'courier'; background-size: 100% 100%; cover; /* background-color:rgb(245, 250, 255) */ background-color:rgb(255, 255, 255); background-image: } /*url("https://www.aareff.com/images/background-50-fade.jpg");*/
h1	{
	font-weight: normal; 
	text-shadow: 3px 3px 5px #999; 
	font-family: Arial; 
	/*color: rgb(16,90,148);*/
	color: rgba(0,0,255,0.85);
	text-decoration: none;
}

h2                            {
	/*background: rgba(16,90,100,0.85);*/
	background: rgba(0,0,255,0.85);
	border-radius: 5px;
	width: 97%;
	border: 7px;
	padding: 7px;
	margin: 0px;
	font-weight: normal; 
	text-shadow: 3px 3px 5px #999; 
	font-family: 'Arial', sans-serif; 
	color: white; 
	text-decoration: none; 
	text-align: left;
	margin-top: 15px;
	margin-bottom: 5px;
}

h3                            {font-family: 'Arial'; color: black; text-shadow: 2px 2px 5px #aaa; font-weight: bold; }
p 							  {text-shadow: 2px 2px 5px #aaa; font-family: 'Arial', sans-serif; color: black; text-align: justify;}
p.centre   										{text-align: center;}
li                            {font-weight: normal; text-shadow: 0px 0px 0px #777; font-family: 'Arial', sans-serif; color: black;}
ul                            {list-style-type: square; margin: 15; padding: 0; text-align: justify;}

a:link 						  {text-decoration: none;}

table {
  border-collapse: collapse;
  width: 100%;
  
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
tbody tr:nth-child(odd) {
  background: #eee;
}

.bodytext                     {text-shadow: 3px 3px 5px #aaa; font-family:  'Arial', sans-serif; 'Arial', sans-serif; color: black;}
.logotext                     {text-shadow: 3px 3px 5px #aaa; font-family:  'Arial', sans-serif; color: black;}
.libig						  {font-weight: normal; text-shadow: 3px 3px 5px #999; text-align: left; margin-left:20px; margin-top:5px; font-family: 'Arial', sans-serif; color: rgb(16,90,148);}

/* .master-block                 {max-width: 760px; margin-left: auto; margin-right: auto;} */
.master-block                 {max-width: 1050px; margin-left: auto; margin-right:  auto; padding-left: 15px; padding-right: 15px; text-align: justify;}

/* .top-block-outer              {max-width: 100%; margin-left: auto; margin-right: auto;} */
.top-block-inner              {margin: 0px; vertical-align: top; text-align: center; display: inline-block;}
text-align: justify;
.top-left-panel-text          {font-family:  'Arial', sans-serif; color: black; text-align: justify;}
.top-left-panel-text a        {color: black; font-weight: bold;}

.main-menu-button-block       {width: 100%; text-align: center; display: inline-block; width: 100%;}
.main-menu-button             {text-shadow: 3px 3px 5px #aaa; width: 31.6%; color: black; padding-bottom: 5px; padding-top: 5px; margin-bottom: 5px; margin-top: 5px; border: 0px solid rgb(16,90,148); font-weight: normal; border-radius: 5px; background: silver; display: inline-block; font-family: 'Arial', sans-serif;}
.main-menu-button:hover       {background: rgba(16,90,148,1) ; color: white;}
			
.banner-promo-outer           {width: 100%; text-align: center; display: inline-block; margin: 2px; padding:1%; font-weight:bold; font-family: 'Arial', sans-serif;}

.category-panel                  {vertical-align: top;  border-radius: 15px; padding: 0%; margin: 1%; background: rgba(16,90,148,0.0); font-weight:bold; font-family: 'Arial', sans-serif; color:white; display: inline-block; box-shadow: 3px 3px 5px #888888;}  /* border: 4px solid rgb(16,90,148); */
.category-panel:hover  			{background: rgba(16,90,148,0.1);}

.category-panel a                {text-decoration: none; color: black;}
.category-menu-block             {text-align: center; font-family:  'Arial', sans-serif;}				
.category-menu-block a:link      {text-decoration: none;}	
.category-menu-text              {color: black; width: 90%; text-align: justify; padding: 2%; display: inline-block; } 
.category-menu-button-back       {background: rgba(255,0,0,1); display: inline-block; text-align: center; margin: 2px; padding: 2px;   color: white; font-family:  'Arial', sans-serif; font-weight: bold;  border-radius: 5px;  box-shadow: 3px 3px 5px #888888;}
.category-menu-button            {text-shadow: 3px 3px 5px #aaa; vertical-align: top; margin: 2px; padding: 2px; color: black; font-family:  'Arial', sans-serif; font-weight: normal; text-align: center; border-radius: 5px; background: rgba(16,90,148,0.3); display: inline-block; border: 0px solid black;  box-shadow: 3px 3px 5px #888888;}
.category-menu-button-back:hover {background: blue; color: white;} 
.category-menu-button:hover      {background: blue; color: white;}

.currency-menu-button            {margin: 2px; padding: 2px; color: rgba(16,90,148,1); font-family:  'Arial', sans-serif; font-weight: bold; text-align: center; border-radius: 5px; background: rgba(16,90,148,0.1); display: inline-block; border: 1px solid rgba(16,90,148,0.5); box-shadow: 3px 3px 5px #888888;}
.currency-menu-button:hover      {background: blue; color: white; cursor: hand; cursor: pointer;}



.price-panel                     {width: 97%; background: rgba(16,90,148,0.1); border: 1px solid rgba(16,90,148,0.3); border-radius: 5px; padding-left: 10px; padding-right: 0px; padding-top: 4px; padding-bottom: 4px; box-shadow: 3px 3px 5px #888888;}

.section-panel {vertical-align: top;  border-radius: 15px; padding: 15px; margin: 0px; background: rgba(16,90,148,0.05); font-family: 'Roboto', sans-serif; color:white; box-shadow: 3px 3px 5px #888888; }  border: 1px solid rgb(16,90,148)/* ;





/* .simple-goods-panel							 {background: rgba(16,90,148,0.05); border:1px solid rgba(16,90,148,0.3); padding:8px; margin:2px; border-radius: 5px; box-shadow: 3px 3px 5px #888888;} */

.simple-goods-panel							 { padding:8px; margin:2px; }

.submit-button								   {font-family:  'Arial', sans-serif; color: black; margin: 2px; padding: 2px; color: rgba(16,90,148,1); font-family:  'Arial', sans-serif; font-weight: bold; text-align: center; border-radius: 5px; background: rgba(16,90,148,0.3); display: inline-block; border: 1px solid rgba(16,90,148,1); }

.address-box-block            {max-width: 100%; text-align: center;}
.address-box-outer            {margin: 1%; font-family:  'Arial', sans-serif; display: inline-block; width: 30%;}
.address-box-top              {text-shadow: 3px 3px 5px #aaa; background: rgba(255,255,255,0.5);}
.address-box-bottom           {text-shadow: 3px 3px 5px #aaa; border-top: 2px solid silver; color: black; border-radius: 0px;} /*background: rgba(16,90,148,0.75); */
.address-box-flag             {width: 12%;}	
		
.info_box_block               {max-width: 100%; text-align: center; }
.info_box_outer               {margin:1%; text-align: left; vertical-align: top; display: inline-block; width: 47%;} /*height: 15%; height: 70%;*/ 
.info_box_top                 {padding: 2px; text-align: left; color: black; font-family:  'Arial', sans-serif; font-weight: bold; background: rgba(255,255,255,0.5);}
.info_box_bottom              {border-radius: 10px; padding: 5px; vertical-align: top; background: rgba(0,0,0,0.1); text-align: justify; color: black; font-family:  'Arial', sans-serif; }

.social-payment-methods-block {max-width: 100%; text-align: center; }
.social-box-outer             {display: inline-block; vertical-align: top; background:rgba(16,90,148,0.5); border-radius: 15px; margin-bottom: 10px;}
.social-box-left              {margin-top: 1px; border-radius: 15px; vertical-align: top; display: inline-block; padding: 1%; color: white; font-family:  'Arial', sans-serif;}
.social-box-right             {display: inline-block; }
.payment-methods-box          {display: inline-block; margin-bottom: 10px;}			

.geo-plugin                   {color: black; text-align: center; font-family:  'Arial', sans-serif;}
.geo-plugin a                 {color: black;}

   
.videoWrapper {
    position: relative;
    padding-bottom: 49%; /*56.25%;  16:9 */
    padding-top: 25px;
    height: 0;
    }
		
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

   
.videoWrapperSquare {
    position: relative;
    padding-bottom: 94%; /*94%;  16:9 */
    padding-top: 25px;
    height: 0;
    }
		
.videoWrapperSquare iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
	
.videoWrapper9x16 {
    position: relative;
    padding-bottom: 125.5%; /*56.25%;  16:9 */
    padding-top: 25px;
    height: 0;
    }
		
.videoWrapper9x16 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

.videoWrapper4x5 {
    position: relative;
    padding-bottom: 119%; /* 4:5 */
    padding-top: 25px;
    height: 0;
    }
		
.videoWrapper4x5 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

.menu-item-image {
content-visibility: auto;
width: 140px; 
height: 140px; 
border: 1px dotted blue; 
box-shadow: 3px 3px 5px #888888;
border-radius: 3%;
}

.menu-item-block {
width: 140px; 
margin: 10px; 
vertical-align: top; 
text-align: justify; 
display: inline-block;
text-shadow: 3px 3px 5px #aaa; 
font-family: 'Arial', sans-serif; color: black;
text-align: center;
font-weight: bold;
font-size: 70%;
line-height: 25px
}

.menu-item-block a {
    color: #000000;
    text-decoration: none;
}

.menu-item-image:hover {
background-color: lightgrey;
}