#nav-1 {
  /*determine way to make gradient only apply to mobile collapse bar after you expad it. so you can better see links. */
  /*background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.46) 100%,rgba(0,0,0,1.00) 100%);*/
}
#row1{
  height: 450px;
  padding-top: 10rem;
  padding-bottom: 8rem;
  background-position-x: center;
  background-position-y: 80%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;

}

#row1 h1 {
  font-family: arial black;
  font-size: 2rem;
}

#row1 h3{
  font-family: arial narrow;
  font-size: 1.5rem;
}

#row2 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
#row3 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
#row4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
#row4 #img-1{
  height:20rem;
  background-image: url(/images/ep.imageofphone.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#row5 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.div-text-wrapper{
  height:6rem;
}
#row6 {
  height: auto;
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-position-x: center;
  background-position-y: 95%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;

}
#row7 {
  background-color: #bcdfe2;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
#row8 {

}
#row8 a:hover{
 color: #333e48;
}
#col-img-1 {
	background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.46) 100%,rgba(0,0,0,1.00) 100%), url(/images/ep.img3.jpg);
	background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.46) 100%,rgba(0,0,0,1.00) 100%), url(/images/ep.img3.jpg);
	background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.46) 100%,rgba(0,0,0,1.00) 100%), url(/images/ep.img3.jpg);
	background-image: linear-gradient(180deg,rgba(0,0,0,0.46) 100%,rgba(0,0,0,1.00) 100%), url(/images/ep.img3.jpg);
	background-position: 50% 50%;
	background-size: cover;
	height: auto;
}
#col-img-2 {
	background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.46) 100%,rgba(255,0,0,1.00) 100%), url(/images/ep.img4.jpg);
	background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.46) 100%,rgba(255,0,0,1.00) 100%), url(/images/ep.img4.jpg);
	background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.46) 100%,rgba(255,0,0,1.00) 100%), url(/images/ep.img4.jpg);
	background-image: linear-gradient(180deg,rgba(0,0,0,0.46) 100%,rgba(255,0,0,1.00) 100%), url(/images/ep.img4.jpg);
	background-position: 50% 50%;
	background-size: cover;
	height: 100%;
}
#col-img-3 {
	height: 100%;
	background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.46) 100%,rgba(255,0,0,1.00) 100%), url(/images/ep.img5.jpg);
	background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.46) 100%,rgba(255,0,0,1.00) 100%), url(/images/ep.img5.jpg);
	background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.46) 100%,rgba(255,0,0,1.00) 100%), url(/images/ep.img5.jpg);
	background-image: linear-gradient(180deg,rgba(0,0,0,0.46) 100%,rgba(255,0,0,1.00) 100%), url(/images/ep.img5.jpg);
	background-position: 50% 50%;
	background-size: cover;
}
#row9 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
#row10 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

#row11 {
  background-color: #70aaaa;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/*#row1 img{
  height: 15vw;
  max-height: 170px;

}*/

/*Equal-width columns can be broken into multiple lines,
but there is a Safari flexbox bug that prevents this from
working without an explicit flex-basis or border.*/
.col {
  border: 1px solid transparent;
}

/* Small devices (landscape phones, less than 992px)*/
@media (max-width: 991px) {
  #nav-1 .btn-link {
    background-color: rgba(255,255,255,1);
  }
  #row6 {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-position-x: 5%;
    background-position-y: 100%;
    background-size: 250%;
  }
  #row1 {
    height: 450px;
  }
  #row1 .wrapper{
    padding: 50px 0px;
  }
  #row1 h1 {
    padding-top: 2.5rem;
    font-size: 1.5rem;
  }
  #row1 h3 {
    font-size: 1rem;
  }
}