@media all and (max-width: 840px){


body {
	font: 120%/1.4 Verdana, Arial, Helvetica, sans-serif;
	  background: 
    radial-gradient(black 3px, transparent 4px),
    radial-gradient(black 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
  #fff;
  background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
  background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
	margin: 0;
	padding: 0;
	color: #000;
}
p {text-align:left;}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}
/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {box-shadow: 10px 5px 5px #666666; border:solid 1px #000000;
	max-width: 1160px;
	background-color: #FFFFFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	display:flex; justify-content:space-between; flex-wrap:wrap; flex-direction:row; margin-top:100px;
}
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
#header {flex:none!important; width:100%;
	background-color: #C10003; height:200px;
}
#header h1 { font-size:32px; margin: 20px 0px 10px 240px;color: #F8D000; animation: 2s slide-right;
}

@keyframes slide-right {
  from {
  margin: 20px 0px 10px -4240px;
  }

  to {
   margin: 20px 0px 10px 240px;
  }
}


#logo {position:absolute; top:40px;  z-index:9999; width:240px; height:240px;}

.sidebar1 {
	flex:1 2 220px;
	margin:0 auto; text-align:center;
	background-color: #EADCAE;
	padding-bottom: 10px;width:100%;
}
.content {flex:1 2 70%;
	padding: 10px 0; margin-top:30px;
	
}



/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
.sidebar1 ul{display: iblock;margin:0 auto;
	list-style: none; /* this removes the list marker */
	border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	padding-inline-start: 0px;
}
.sidebar1 li {margin:0 auto; 
	border-bottom: 1px solid #666; /* this creates the button separation */
}
.sidebar1 a, .sidebar1 a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 15px;padding:20px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	
	text-decoration: none;
	background-color: #C6D580;
}
.sidebar1 a:hover, nav a:active, nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #ADB96E;padding:20px;
	color: #FFF;
}

/* ~~ The footer ~~ */
footer { text-align:center;
	padding: 10px 0;
	background-color: #000000; color:#ffffff;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}


}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media all and (min-width: 840px){


body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	  background: 
    radial-gradient(black 3px, transparent 4px),
    radial-gradient(black 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
  #fff;
  background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
  background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
	margin: 0;
	padding: 0;
	color: #000;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}
/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {box-shadow: 10px 5px 5px #666666; border:solid 1px #000000;
	max-width: 1160px;text-align:left;
	background-color: #FFFFFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	display:flex; justify-content:space-between; flex-wrap:wrap; flex-direction:row; margin-top:100px;
}
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
#header {flex:none!important; width:100%;
	background-color: #C10003; height:80px;
}
#header h1 {margin: 20px 0px 10px 240px;color: #F8D000;
  animation: 2s slide-right;
}

@keyframes slide-right {
  from {
  margin: 20px 0px 10px -4240px;
  }

  to {
   margin: 20px 0px 10px 240px;
  }
}


#logo {position:absolute; top:40px;  z-index:9999; width:240px; height:240px;}
.sidebar1 {
	flex:1 2 220px;
	margin:0 auto;
	background-color: #EADCAE;
	padding-bottom: 10px;width:100%;
}
.content {flex:1 2 70%;
	padding: 10px 0; text-align:left;
	margin-top:90px;
}



/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
.sidebar1 ul{display: iblock;margin:0 auto;
	list-style: none; /* this removes the list marker */
	border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	padding-inline-start: 0px;
}
.sidebar1 li {margin:0 auto;
	border-bottom: 1px solid #666; /* this creates the button separation */
}
.sidebar1 a, .sidebar1 a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 15px; padding:20px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	
	text-decoration: none;
	background-color: #C6D580;
}
.sidebar1 a:hover, nav a:active, nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #ADB96E; padding:20px;
	color: #FFF;
}

/* ~~ The footer ~~ */
footer {
	padding: 10px 0;
	background-color: #000000; color:#ffffff;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}


}