/* Image CSS for familiar tehcnologies page */

@import url('styles-main.css');


/* Mobile Background */
.apl-background {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -2;
  width: 100vw;
  height: 100%;
  /*overflow: auto;*/
  background-image: url('../images/bkgtech1-mobile.png');
  background-position: 50% 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/*Intro grid mods*/
.intro-grid {
  margin: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.intro-image img {
  border-bottom-right-radius: 0;
}

/* main body */
.guts-head {
  background: rgba(255, 255, 255, .87);
  padding-bottom: 1em;
  margin-bottom: 1em;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  color: #49310D; /* Very dark orange */
}

.guts-head .guts-wrap h2 {
  margin-bottom: 0;
  padding-bottom: 0;
}

.guts-head .hidden {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 1.2em;
}

.guts h3 {
  margin: 1em;
}

/* main body icons */
.main-icons-wrap {
  /*grid-area: icons;*/
  padding-bottom: 2em;
}

/* Section with cards */
.section-b,
.section-d,
.section-f,
.section-h,
.section-j,
.section-l,
.section-n {
  display: flex;
  background: rgba(0, 0, 0, 0);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.box-wrapper-1,
.box-wrapper-2,
.box-wrapper-3,
.box-wrapper-4,
.box-wrapper-5,
.box-wrapper-6,
.box-wrapper-7 {
  display: flex;
	flex-direction: column;
	/*flex: 2 2 auto;*/
	margin: 1em;
  padding-right: 1em;
  min-width: 90%;
}

.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7 {
  display: grid;
  background: rgba(0, 0, 0, 0.50);
  text-decoration: none;
  /*margin: 1em;*/
  align-self: center;
  border-radius: 16px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-template-areas:
      "icon heading"
      "pgraph pgraph";
  align-items: center;
}

/* cards */
.main-icon {
  grid-area: icon;
  max-height: 100px;
  width: auto;
  max-width: 100px;
  padding: 1em;
  align-content: center;
}

.main-title {
  grid-area: heading;
  padding: 34px;
  text-align: center;
  justify-content: center;
  align-content: center;
}

.main-p {
  grid-area: pgraph;
  padding: 0 1em 1em;
  text-align: left;
}

/*.main-icon {
}*/

/************************ Media Queries ******************************/
/*                            900px                                  */

@media(min-width: 900px) {

  .apl-background {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -2;
    width: 100vw;
    height: 100%;
    background-image: url('../images/bkgtech1.jpg');
    background-position: 50% 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  .guts {
    display: grid;
    grid-template-columns: 1fr repeat(3, minmax(auto, 25em)) 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "header header header header header"
        "nothing section-a section-a section-a blank"
        "nothing section-b section-b section-b blank"
        "nothing section-c section-c section-c blank"
        "nothing section-d section-d section-d blank"
        "nothing section-e section-e section-e blank"
        "nothing section-f section-f section-f blank"
        "nothing section-g section-g section-g blank"
        "nothing section-h section-h section-h blank"
        "nothing section-i section-i section-i blank"
        "nothing section-j section-j section-j blank"
        "nothing section-k section-k section-k blank"
        "nothing section-l section-l section-l blank"
        "nothing section-m section-m section-m blank"
        "nothing section-n section-n section-n blank";
  }

  .guts-head {grid-area: header;}

  .guts-head .hidden {display: none;}

  /* Heading sections */
  .section-a {grid-area: section-a;}
  .section-c {grid-area: section-c;}
  .section-e {grid-area: section-e;}
  .section-g {grid-area: section-g;}
  .section-i {grid-area: section-i;}
  .section-k {grid-area: section-k;}
  .section-m {grid-area: section-m;}

  .section-a, .section-c,
  .section-e, .section-g,
  .section-i, .section-k,
  .section-m {
    margin: 3em 0 0;
    background: rgba(0, 0, 0, 0.35);
  }

  /* Sections with cards */
  .section-b {grid-area: section-b;}
  .section-d {grid-area: section-d;}
  .section-f {grid-area: section-f;}
  .section-h {grid-area: section-h;}
  .section-j {grid-area: section-j;}
  .section-l {grid-area: section-l;}
  .section-n {grid-area: section-n;}

  .section-b, .section-d,
  .section-f, .section-h,
  .section-j, .section-l,
  .section-n {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "box1 box1 1c"
      "2a box2 box2"
      "box3 box3 3c"
      "4a box4 box4"
      "box5 box5 5c"
      "6a box6 box6"
      "6a box7 box7";
      grid-gap: 0;
      margin-top: 0;
      margin-bottom: 1em;
      background: rgba(0, 0, 0, 0.40);
      /*overflow-x: inherit;*/
  }

  .box-wrapper-1 {grid-area: box1;}
  .box-wrapper-2 {grid-area: box2;}
  .box-wrapper-3 {grid-area: box3;}
  .box-wrapper-4 {grid-area: box4;}
  .box-wrapper-5 {grid-area: box5;}
  .box-wrapper-6 {grid-area: box6;}
  .box-wrapper-7 {grid-area: box7;}


  /* boxes on the left */
  .box1, .box3, .box5, .box7 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
      "icon heading"
      "pgraph pgraph";
  }

  .box1 img,
  .box3 img,
  .box5 img,
  .box7 img {
    display: block;
    margin-left: auto;
    margin-right: 0px;
  }

  /* boxes on the right */
  .box2, .box4, .box6 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "heading icon"
      "pgraph pgraph";
  }

}