/* color references
circles - blue #4B55AC
footer - grey - #333333
salmon - #FF4933
team background - #777A8B
submit button - green #46B29D
*/

/* =====General===== */

body {
  font-family: 'Gayathri', sans-serif;
  font-size: 14px;
  background-color: white;
}

/* =====Global===== */
img {
  max-width: 100%;
  height: auto;
}
h1 {
  font-size: 25px;
  color: #4B55AC;
}
h2 {
  font-size: 20px;
  color: #4B55AC;
}
h3 {
  font-size: 18px;
  color: #4B55AC;
}
h4 {
  font-size: 15px;
  color: #4B55AC;
}
/* =====navbar===== */


/* =====hero===== */
.waHero {
  background: white url("../images/hero_lg.jpg") no-repeat left top;
  background-size: auto 150px;
  color: white;
}
.heroText {
  text-align: left;
  margin-top: 10px;
}
.waCircle {
  margin-top: 10px;
}
.tag{
  color: white;
}

/* =====welcome===== */
.waWelcome {
}
.waWelcome img {
  max-width: 50%;
}
/* =====Main===== */
.waMain{
  background: url("../images/circlesDarkest.png") no-repeat left top;
  /*min-height: 334px;*/
}
.waName {
  font-weight: bold;
  font-size: 20px;
  color: #FF4933;
}

.overlay{
  background: rgba(230, 242, 255, 0.4)
}
.waTwo {
  max-width: 500px;
}
.waThree{
  max-width: 350px;
}
.waFour{
  max-width: 250px;
}
.waBlueBG{
  background-color: #777A8B;
  color: white;
}
.waBlueBG h1{
  color: white;
}
.waBlueBG h3{
  color: black;
}
.bullets{
		list-style-position: outside;
	  list-style-type: circle;
		display: block;
}
/* =====forms===== */

.btn-success {
    color: #000000;
    background-color: #48AB89;
    border-color: #48AB89;
}
.btn-success:hover {
  color: #fff;
  background-color: #2A5E4A;
  border-color: #2A5E4A;
}
.btn-danger {
    color: #000000;
    background-color: #FF4933;
    border-color: #FF4933;
}
.btn-danger:hover {
  color: #fff;
  background-color: #B31421;
  border-color: #B31421;
}
.formBox {
  border: 1px solid #ced4da;
  border-radius: 5px;
  background-color: #fff;
  padding: 5px 10px;
}
/* =====Work===== */
.works {
  border: 6px solid #777A8B;
  border-radius: 5px;
  z-index: 1;
}
.picContainer {
  position: relative;
  width: 100%;
}
.picImage {
  max-width: 350px;
  height: auto;
}
.picOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #4B55AC;
  opacity:0.8;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}
.picContainer:hover .picOverlay {
  transform: scale(1);
}
.picText {
  color: white;
  font-size: 25px;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/*reply*/
.message {
  color: red;
}

/* =====footer===== */
.waFoot {
  background-color: #534C65;
  color: white;
}
.waFoot img{
  max-width: 75%;
  max-height: auto;
}
footer hr {
  color:white;
}
footer {
  color:white;
}
.nav-link a:link{
  color: white;
}
footer li{
  display: inline;
  text-decoration: none;
  padding: 2px;
}

.phone {
  padding: 5px;
  max-height: 73px;
}

/* Larger than mobile - small*/
@media (min-width:  576px) {

}
/*tablet - Medium*/
@media (min-width: 768px) {
  .waHero {
    background: white url("../images/hero_lg.jpg") no-repeat left top;
    background-size: auto 250px;
  }
  #SMImage {
    order:1;
  }
  #SMText {
    order: 2;
  }

  #socialMedia {
    order: 1;
  }
  #phone {
    order:2;
  }

}
/* Laptop Desktop - large */
@media (min-width: 992px) {
  body {
    font-size: 18px;
  }
  img {
    max-width: 100%;
  }
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 35px;
  }
  h3 {
    font-size: 30px;
  }
  h4 {
    font-size: 25px;
  }
  .waHero {
    background: white url("../images/hero_lg.jpg") no-repeat left top;
    background-size: cover;
    min-height: 356px;
  }
  .waQuote {
    margin-top: 40px;
  }
  .waCircle {
    margin-top: 50px;
}
.waWelcome img {
  max-width: 100%;
  text-align: center;
}

.waText {
  max-width: 500px;
}
.waMain{
  min-height: 334px;
}

footer hr {
  display: none;
}
.waFoot img{
  max-width: 100%;
  max-height: auto;
}

}
  /* Larger than Desktop HD - Extra Large */
@media (min-width: 1200px) {
}
