@charset "utf-8";
/* CSS Document  version 8 changes to mobile styling as google ads were interfering with layout */
body {background-color: WhiteSmoke;
	min-width: 920px;
   font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	color: #666;
	/*overflow-x: hidden */;
	}
.lg{user-select: none;}
/*** main styles ***/
h1, h2,h3,h4 {font-family: 'Open Sans', sans-serif; margin:.25em 0em 0em .25em; }
h1{font-size: 1.5em;} h2{font-size: 1em;} h3{font-size: 1em;}p{font-size: 1em;}

img {border: none;}

.ga1 {width:728px; height:90px; vertical-align:auto; margin-right:auto; margin-left:auto;}
.ga2 {width:300px; height:300px; vertical-align:auto; margin: auto;}
.ga3 {width:160px; height:600px; margin:5px; }
/* flexBox styles */

#outer	{display:flex;	flex-direction:column; 
	min-width: 100%;   min-height: 100%;
    background-color: WhiteSmoke;
    position: relative;
    top: 0;    bottom: 100%;    left: 0;
    z-index: 1;}

#cookie {
	z-index:9999; /* place on top of everything else */
	order:0;
	vertical-align: middle;
	margin-bottom:5px; padding: 5px;
	background: rgba(245,245,245, 0.9)
}
#cookie p{font-size:1.2em;}


#main>article, #main>nav, #main>aside, #head2, footer {
	margin: 0px;
	padding: 0px 5px 2px 5px;
	vertical-align: top;
	border: thin solid #F00;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	}

#main			{display:flex;}
#main>nav		{order:1; display: flex; flex-direction: column; align-items: center; width:180px; }
#main>article	{order:2; min-width: 12em; flex:1; margin-left:5px; margin-right:5px}
#main>aside		{order:3; width:300px;}

#head1 {display:flex; order:1;}
#head2 {display:flex; order:3; background-image: linear-gradient(to bottom, #F0FAFF 0%, #CEEAFB 100%);height:30px; margin-bottom:5px;  ; border-top-left-radius:0px;  border-top-right-radius:0px;	}
#head3 {display:flex; order:2; border: 1px solid #F00; border-bottom: hidden; border-top-left-radius:  7px; border-top-right-radius: 7px;}
#main	 {order:4;}
#foot  {order:5;}


aside {display:flex; flex-direction:column; justify-content: flex-start;}

footer {margin-top:5px; text-align: center;}


.b1 {margin-left:auto;}
.b1 a {text-decoration: none;  
}

#viewBasket{display: none;float: right; padding-right: 10px; }
#viewBasket a{ text-decoration: none;}

.fr {padding-left: 5px;	float: right;

}
.fr .button{ float:none;}

.fr img {margin: -5px 5px 0px 5px ;}
	
#basket{
	position: relative;
    top: 27px;
    left: 250px;
	display: flex;
	flex-direction: column;
	float: right;
	width: 275px;
	height: auto;
	visibility: visible; /* or hidden. hidden by default on mouseover, its visible */
	border-radius: 10px;/* rounded corners */
	background: WhiteSmoke;
	border: thin solid #F1070B;
		
	z-index:1000;
	}
#basketQty{	}
#basketPrice{}

.basketItem{
	font-size: .8em;
	color: darkgrey;
		padding: 15px;
		margin: 10px 10px 10px -30px;
		background: #EBA5A6;
	height: 65px;
				
	}	
.basketItem p, .basketItem a{
	margin: 0px;
	padding: 3px;
}

.basket-button{}
.topRight{ 
position:relative;
	top:-50px;
	left:195px;
}
.leftAllign{
	position: relative;
	top:-65px;
	left: 70px;
	width:200px;
}

/* addded by alex 5 dec 2021 */


#logoHolder{
   background-image: url(https://afors.ams3.cdn.digitaloceanspaces.com/styleImages/afors95.fw.png) ;
   background-repeat: no-repeat;
   background-size: contain;
   width: 180px;
   height: 100px;
   
   }
.lazy {background-image: none;   background-color: #F1F1FA;}

.sidebar.left {
    top: 0;
    left: 0;
    bottom: 0;
	z-index: 9999999999;
    width: 270px;
    background: #1C222E;
  	overflow-y: scroll;
	 }
.sidebar.left::-webkit-scrollbar{
	display:none;
}

.sidebar.right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 270px;
    background: #448AFF;
}

.sidebar.bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: 570px;
    background: #03A9F4;
    font-size: 1.25em;
	overflow-y: scroll;
}

.sidebar.top {
    left: 0;
    right: 0;
    top: 0;
    height: 270px;
    background: #03A9F4;
}

.sidebars > .sidebar {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
    position: fixed;
   
    padding: 0px 5px 0px 5px;
    font-size: 1.2em;
    
}
   .sidebar{
      z-index:9999999999 !important;
   }          
          
       
   
  
   .container{
      display: flex;
      justify-content:  space-between;
      align-content: space-between;
   }
   
   .left, .right, .top, .bottom { 
   color: white;
   opacity:0.95;   
   }   
.left, .right{
	opacity:1;
}
   .top{
      top:10px;
   }
   .mid{
      top: 50%;
   }
.bot{
	top:94%;
}
   
   .buttons{
   display: flex;
   justify-content: space-between;
   position:absolute;
   margin-left: 15px;
   width:97%;
   }

.gButton{
   border: 1px solid #008200;
   background-color: #77d42a;
   font-size:1.25em;
   font-weight: bold;
   text-shadow: 1px 1px 0px #aade7c;
   border-radius: 6px;
   
   background: linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
   margin: auto;
   max-height: 35px;
   color: rgb(17,51,170);
   cursor: pointer;
   text-decoration: none;
   
}
#left , #right, #bottom{   opacity:0.5;}   

#modalBox{	display: none;}
#modalContent{
	display: flex;
	flex-direction: column;
	border: 1px solid #888;
	border-radius: 7px;
	background-color: whitesmoke;
	width: 50%; margin: auto;
padding: 20px
}
.modal{
	display:none;
	position: fixed;
	z-index: 999;
	top: 0; left: 0;
	width: 100%; height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.5);
	}
 
 .sidebar.content {  }  
 .c1{
      display:flex;
      flex-direction: row;
      flex-basis: 100%;
      flex: 1;
		justify-content: space-between;
      text-align: left;  
         
      
   }   
   .r1{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width:100%
   }
   .dc{
      display: flex;
      flex-direction: column;
      flex-basis: 2;
      
   }
   .bc{
      /* background-color: blue; */
     
      text-align: left;
   }
   .gc{
      /*background-color: green; */
      height: 50px;
      text-align: right;
   }
   
.flexOuter,
.flexInner {
  list-style-type: none;
  padding: 0;
}

.flexOuter {
  max-width: 400px;
  margin: 0 auto;
}

.flexOuter li,
.flexInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
color: black;
background-color:#448AFF;	
}

.flexInner {
  padding: 0 8px;
  justify-content: space-between;  
}

.flexOuter > li:not(:last-child) {
  margin-bottom: 10px;
}

.flexOuter li label,
.flexOuter li p {
   font-size: 1.25em;

  }

.flexOuter > li > label,
.flexOuter li p {
  /* flex: 1 0 120px;   */
  max-width: 220px;
}

.flexOuter > li > label + *,
.flexInner {
  flex: 1 0 220px;
}

.flexOuter li p {
  margin: 0;
}

.flexOuter li input:not([type='checkbox']),
.flexOuter li textarea {
  padding: 15px;
  border: none;
}


.flexInner li {
  width: 100px;
}

.fad, .fas, .far {
	color:red
}
.fa-window-close{
	color:white;
}



.sidenav {
    height: 100%;
    width: 0; 
    position: fixed;  
    z-index: 1; 
    top: 0; 
    left: 0;
    background-color: #CEEAFB; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.5s; 
}



.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}


.sidenav a:hover { color: #f1f1f1;}


.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
.pad5{padding: 5px;}


.menuItem{font-size: 1.75rem;}	
	
.sidebar{
		display: flex;
		flex-direction: column;
	}
[data-title]:hover:after {
        opacity: 1;
        transition: all 0.1s ease 0.5s;
        visibility: visible;
      }
 [data-title]:after {
	 font-size: 1.25em;
	 content: attr(data-title);
	 position:absolute;
	 top: 2.6em;
    border: red 1px solid;
       
    background: #e3e3e3;
    right: 10%;
	 padding: 12px;
	 width: 400px; height: auto;
	 opacity: 0;
    z-index: 99999;
    visibility: hidden;
	 border-radius: 7px;
       
      }
 [data-title] {
        position: relative;
      }
.leaderboard{
	display: flex;
	justify-content: center;
	width: 100%;
}

ul#adList li{
	margin-top:1.5em;
	margin-bottom 2em;
	list-style-type: circle;
}

.banner-container img {
 text-align:center;
  max-width: 100%;
  height: auto;

@media only screen and (max-width: 1020px){
	
	body {min-width: 663px;
	margin:4px}
	
	nav {width:25vw!important;}
	#mainArticle{width: 75vw;}
	#rightBims, .leaderboard {display:none;}
	.contactText textarea{width:63vw ;}

	}

@media only screen and (max-width: 600px){
	body {min-width: 371px;
	margin:4px}
	
	#leftSearch, #main>nav , #head2, #head3  {display:none;}
	#mainArticle{width: 100vw;
	margin-left:0px;}
	.contactText textarea{width:83vw ;}
	#main{width:100vw;}
	
	#modalContent{	width: 95%;}
	.buttons{width: 97vw;margin: 0px;}
	#foot {width:95vw;}

	
	

}