@charset "utf-8";
/* css file   aw  */
/* Next block are defaults */
/*     public_html/kc1533/includes/kc1533.css       */
/*==================================================*/
/*  Get all a the box ... see CSS box-sizing        */
* {
  box-sizing: border-box;
}
/*==================================================*/

/*==================================================*/
hr { height: 5px; }
/*==================================================*/

/*==================================================*/
/*==================================================*/
/*     Container is 12 units across                 */
/*  container and nav are for all                   */
/*==================================================*/
.container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 0px;  /* sets the spaceing on boxes, ...     */
  /* set to 20 from 0 to reveal box layouts         */
            }
/*              Navagation box                      */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}

/*==================================================*/
/*              Mobile first                        */
/*         Mobile Phones	320px - 480px           */
/* Here we display the sections in source order     */
/* for screens less than 576 pixels wide            */
/*  basic one column                                */
/*==================================================*/
.container > * {
  /*border: 1px solid green;  uncomment to see boxes*/
  background-color: beige;
  padding: 10px;
  grid-column: col-start / span 12;
                }
.head   {
		background-color: #e2e393;
        border-bottom: 3px solid black;
		color: black;
		text-align:center;
        }

  .block3 {
    grid-column: col-start / span 12;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
        }

  .footer {
    grid-column: col-start / span 12;
		background-color: #e2e393;
		color: black;
		text-align: center;
  }


/*==================================================*/
/*                    Cell Phone                    */
/*           Tablets	320px                       */
/* Then, we go to a two column layout for screens   */
/*  between 320 and 767 pixels wide.                */
/*==================================================*/
@media (min-width: 319px) {
  .sidebar {
    grid-column: col-start / span 3;
    grid-row: 3;
                            }
  .ads {
    grid-column: col-start / span 3;
  }
  .content, .footer {
    grid-column: col-start 4 / span 9;
    background-color: #e2e393;
	color: black;
  }

  .block1 {
    grid-column: col-start / span 12;
        }
  .block2 {
    grid-column: col-start / span 12;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
        }
  .block3 {
    grid-column: col-start / span 12;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
        }
 
  .footer {
    grid-column: col-start / span 12;
    background-color: #e2e393;
	color: black;
	text-align: center;
  }

  nav ul {
    display: flex;
    justify-content: space-between;
  }
}
/*==================================================*/

/*==================================================*/
/*                    Tablet                        */
/*           Tablets	481px - 768px               */
/* Then, we go to a two column layout for screens   */
/*  between 576 and 767 pixels wide.                */
/*==================================================*/
@media (min-width: 576px) {
  .sidebar {
    grid-column: col-start / span 3;
    grid-row: 3;
                            }
  .ads {
    grid-column: col-start / span 3;
  }
  .content, .footer {
    grid-column: col-start 4 / span 9;
    background-color: #e2e393;
	color: black;
  }

  .block1 {
    grid-column: col-start / span 12;
        }
  .block2 {
    grid-column: col-start / span 12;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
        }
  .block3 {
    grid-column: col-start / span 12;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
        }
 
  .footer {
    grid-column: col-start / span 12;
    background-color: #e2e393;
	color: black;
	text-align: center;
  }

  nav ul {
    display: flex;
    justify-content: space-between;
  }
}
/*==================================================*/
/*             Computer Screen                      */
/*      Small Laptops	769px - 1024px              */
/* Then, we go to a three column (12 grid) layout   */
/* for screens over 767 pixels wide                 */
/*==================================================*/
@media (min-width: 768px) {
  .nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
    border-right: 1px solid black;
  }
.head   {
		background-color: #e2e393;
        border-bottom: 3px solid black;
		color: black;
		text-align:center;
        }

  .content {
    grid-column: col-start 3 / span 8;
    grid-row: 2 / 4;
  }
  .content12 {
    grid-column: col-start 3 / span 12;
  }

  .sidebar {
    grid-column: col-start 11 / span 2;
  }
  .ads {
    grid-column: col-start 11 / span 2;
  }
  .block1 {
    grid-column: col-start / span 12;
        }
  .block2 {
    grid-column: col-start / span 12;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
        }
  .block3 {
    grid-column: col-start / span 12;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
        }



   .center1 {text-align:center;
        }
  .footer {
    grid-column: col-start / span 12;
		background-color: #e2e393;
		color: black;
		text-align: center;
  }
  nav ul {
    flex-direction: column;
  }
}
/*==================================================*/
/*==================================================*/

/*==================================================*/
/*             Computer Screen                      */
/*      Desktops	1025px - 1200px                 */
/*      Large Screens	1201px and above            */
/* Then, we go to a three column (12 grid) layout   */
/* for screens over 767 pixels wide                 */
/*==================================================*/
@media (min-width: 1026px) {
  .nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
    border-right: 1px solid black;
  }
.head   {
		background-color: #e2e393;
        border-bottom: 3px solid black;
		color: black;
		text-align:center;
        }

  .content {
    grid-column: col-start 3 / span 8;
    grid-row: 2 / 4;
  }
  .content12 {
    grid-column: col-start 3 / span 12;
  }

  .sidebar {
    grid-column: col-start 11 / span 2;
  }
  .ads {
    grid-column: col-start 11 / span 2;
  }

  .block1 {
    grid-column: col-start / span 12;
        }
  .block2 {
    grid-column: col-start / span 12;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
        }
  .block3 {
    grid-column: col-start / span 12;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
        }

  .block4 {
    grid-column: col-start / span 12;
        }



   .center1 {text-align:center;
        }
  .footer {
    grid-column: col-start / span 12;
		background-color: #e2e393;
		color: black;
		text-align: center;
  }
  nav ul {
    flex-direction: column;
  }
}
/*==================================================*/
/*==================================================*/