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

/* This CSS changes with screen sizes*/
body                          {font-size: 100%;}
h1                            {font-size: 140%;}
h2                            {font-size: 115%;}
p 														{font-size:90%;}
li                            {font-size:90%;}

.bodytext                     {font-size:90%;}
.logotext											{font-size:68%;}
.main-menu-button             {font-size:85%;}
.banner-promo-outer           {font-size:90%;}
.category-panel               {font-size:70%;}
.category-menu-text           {font-size:90%;} 
.category-menu-button-back    {font-size:60%; width:9%;}
.category-menu-button         {font-size:60%; 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              {width: 49%;}

.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 */

body                          {background-size: 100% 100%; cover; background-color: rgb(255, 255, 255); background-image: } /*url("https://www.aareff.com/images/background-50-fade.jpg");*/
h1                            {text-shadow: 3px 3px 5px #aaa; font-family: 'Roboto', sans-serif; color: rgb(16,90,148); text-decoration: none;}
h2                            {text-shadow: 3px 3px 5px #aaa; font-family: 'Roboto', sans-serif; color: rgb(16,90,148); text-decoration: none; text-align: left;}
h3                            {font-family: 'Roboto', sans-serif; color: rgb(76,76,76); }
p 														{text-shadow: 2px 2px 5px #aaa; font-family: 'Roboto', sans-serif; color: black; text-align: justify;}
p.centre   										{text-align: center;}
li                            {text-shadow: 3px 3px 5px #aaa; font-family: 'Roboto', sans-serif; color: black;}
ul                            {list-style-type: square; margin: 15; padding: 0; text-align: justify;}


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:  'Roboto', sans-serif; 'Roboto', sans-serif; color: black;}
.logotext                     {text-shadow: 3px 3px 5px #aaa; font-family:  'Roboto', sans-serif; color: black;}

.master-block                 {max-width: 760px; margin-left: auto; margin-right: auto;}

.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:  'Roboto', 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: bold; border-radius: 5px; background: silver; display: inline-block; font-family: 'Roboto', 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: 'Roboto', sans-serif;}

.category-panel                  {border: 2px solid silver; border-radius: 2px; width: 28%; padding: 0%; margin: 1%; background: rgba(16,90,148,0.0); font-weight:bold; font-family: 'Roboto', sans-serif; color:white; display: inline-block;}
.category-panel:hover            {border: 2px solid rgb(16,90,148); }
.category-panel a                {text-decoration: none; color: black;}
.category-menu-block             {text-align: center; font-family:  'Roboto', 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:  'Roboto', sans-serif; font-weight: bold;  border-radius: 5px;}
.category-menu-button            {text-shadow: 3px 3px 5px #aaa; vertical-align: top; margin: 2px; padding: 2px; color: black; font-family:  'Roboto', sans-serif; font-weight: bold; text-align: center; border-radius: 5px; background: rgba(16,90,148,0.3); display: inline-block; border: 0px solid black;  }
.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:  'Roboto', 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,1);  }
.currency-menu-button:hover      {background: blue; color: white; cursor: hand; cursor: pointer;}

.price-panel                     {width: 95%; background: rgba(16,90,148,0.1); border: 3px solid rgb(16,90,148); border-radius: 5px; padding-top: 4px; padding-bottom: 4px;}
.simple-goods-panel							 {background: rgba(16,90,148,0.05); border:2px solid silver; padding:8px; margin:2px; border-radius: 5px;}

.submit-button								   {font-family:  'Roboto', sans-serif; color: black; margin: 2px; padding: 2px; color: rgba(16,90,148,1); font-family:  'Roboto', 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:  'Roboto', 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:  'Roboto', 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:  'Roboto', 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:  'Roboto', 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:  'Roboto', sans-serif;}
.geo-plugin a                 {color: black;}