* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	width: 100%;
	height: 100%;
}
.about-row {
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 100%;

}

.col1, .col2 {
  text-align: center;
  font-size: 1.5vw;
  display: grid;
  height: 400px;
  justify-content: center;
}


.frame {
  margin-top:25px;
  height: 400px;
  width: 600px;
  border: solid 1px black;

}
.col1 .frame {
background-image: url('/Images/Gar-Toilet.jpg');
  background-size:contain;
  background-repeat: no-repeat;
background-position: center;
  margin-top: 10px;
}

.col2 .frame{
  background-image: url('/Images/Josh-Pan.jpg');
  background-size:contain;
  background-repeat: no-repeat;
background-position: center;
    margin-top: 10px;
}

p {
  top: -20px;
  width: 600px;
  text-align: center;
}

/* Responsive layout - Large screen */
@media screen and (min-width: 1200px) {
  .head {
    height: 35vh;
  }
  .bg {
    max-height: 35vh;
  }
}

@media screen and (max-width: 700px) {

   .about-row {
    display: inline-block;
     text-align:center;
     width: 100%;
   } 
  .col1, .col2 {
    width: 100%;
    padding-top:5px;
    font-size:15px;

  }

  .col1 .frame {

   background-image: url('/Images/Gar-Toilet.jpg');
    background-size:contain;
    height: 300px;
    width: 250px;
    margin-top: 10px;
    margin-left: 12.5%;
  }
  
  .col2 .frame {

    background-image: url('/Images/Josh-Pan.jpg');
    background-size:contain;
    height: 300px;
    width:250px; 
    margin-top: 10px;
    margin-left: 25%;
  }

h2 {
  margin-bottom: -10px;
}

  h2,p {
    width:75%;
    text-align: center;
    padding-left:12.5%
  }
  .footer {
    padding-top:10px;
    text-align: center;
    background: #ddd;
    margin-top:10px;
    position: relative !important;
    left:0;
    bottom:0;

  }
}