/* Reset Browser Defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set Global Defaults */
body {
font-size:10pt;
font-family: "Times New Roman", Times, Serif;
font-weight: bold;
color: black;
}
.pagewrapper{width: 100%;max-width: 2000px;overflow: scroll;}
img{
  width: 90%;
}
a{text-decoration: none;}
  .content{width: 100%;}
  .center-section{width: 100%;}
  .header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .wall-grid{
    display: grid;
    grid-auto-flow: column;
    justify-content: space-around;
    align-items: center;
    column-gap: 5px;
    grid-row-gap: 2px;
    width: 100%;
    margin: 10px;
    border: 6px;
    border-style:outset;
    border-top-color: #c0c0c0;
    border-left-color: #c0c0c0;
    border-bottom-color: #668cff;
    border-right-color: #668cff;
    padding-bottom:10px;
    background-image: url("../images/clouds-10.jpg");
    text-align: left;
  }
  .wall-grid img{
      width: 15px;
      margin: 0 auto;
  }
  .fancybox-bg{
    background:transparent;
  }
  .fancybox-slide--iframe .fancybox-content {
      width  : 30vw;
      height : auto;
      max-width  : 450px;
      margin-top: 2em;
      background-color: transparent;
  }
  .fancybox-close-small{
    /*background:#e6f2ff;*/
    background: lime;
    border:0;
    border-radius:0;
    color:absolute;
    cursor:pointer;
    opacity:.8;
    padding:8px;
    position:relative;
    left: 10px;
    top: 10px;
    z-index:401
  }


/*Phones-Portrait*/
@media only screen and (max-width: 519px) {
  .content, .center-section{
    width: 100%;
    overflow: scroll;
  }
  .center-section{
    padding-top: 40px;
  }
  .wall-grid {
    width: 90%;
    grid-template-columns: max-content;
    grid-template-rows: repeat(152, 20px);
  }
  .fancybox-slide--iframe .fancybox-content {
      margin-top: 150px;
  }
}
/*Phones-wide-portrait*/
@media only screen and (min-width: 520px) and (max-width: 579px){
  .wall-grid {
    grid-template-columns: repeat(2, max-content);
    grid-template-rows: repeat(76, 20px);
  }
  .fancybox-slide--iframe .fancybox-content {
      margin-top: 50px;
  }
}

/*Phones-Landscape*/
@media only screen and (min-width: 580px) and (max-width: 817px){
  .wall-grid {
    grid-template-columns: repeat(3, max-content);
    grid-template-rows: repeat(51, 20px);
  }
  .fancybox-slide--iframe .fancybox-content {
      margin-top: 50px;
  }
}

/*Tablets portrait*/
@media only screen and (min-width: 818px) and (max-width: 1057px){
  .wall-grid {
    grid-template-columns: repeat(4, max-content);
    grid-template-rows: repeat(38, 20px);
  }
}

/*Tablets Landscape*/
@media only screen and (min-width: 1058px) and (max-width: 1117px){
  .wall-grid {
    grid-template-columns: repeat(5, max-content);
    grid-template-rows: repeat(31, 20px);
  }
}

/*Desktops*/
@media only screen and (min-width: 1118px) {
	.wall-grid {
	  grid-template-columns: repeat(6, max-content);
	  grid-template-rows: repeat(26, 20px);
	}
}
/*Hi-Res Tablet-landsscape*/
/*@media only screen and (min-width: 522px) and (orientation: landscape){
  body{font-size: 10pt;}
  .pagewrapper{width: 100%;}
  .content{width: 100%;}
  .wall-grid {
    grid-template-columns: repeat(4, max-content);
    grid-template-rows: repeat(37, 20px);}
}*/

/*Hi-Res screen*/
/*@media only screen and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2),
                    only screen and (min--moz-device-pixel-ratio: 2),
                    only screen and (-o-min-device-pixel-ratio: 2/1),
                    only screen and (min-device-pixel-ratio: 2){
  body{font-size: 10pt;}
  .pagewrapper{width: 100%;}
  .content{width: 100%;}
  .wall-grid {
    grid-template-columns: repeat(4, max-content);
    grid-template-rows: repeat(37, 20px);}

}

/*Common Styles*/
.grid-item {
  background-color: transparent;
  text-align: left;
  color: navy;
}

.header >img{
  width:85%;
}

.item{
  color:navy;
  text-align: left;
}

.center{
  margin: 0 auto;
}
