/* Submit Button Formatting */

.heroInner .get_started_button{
  height:58px !important; 
  max-width:350px !important; 
}


.heroInner .getStartedButtonInnerDiv{
  height:90% !important; 
  line-height:39px !important; 
}


/* Select Fields Formatting */
.Branch_ID_div {
    margin: 0px auto 20px auto !important; 
}

.fieldHeader{
  font-weight:bold;
  font-family:"Arial", sans-serif !important; 
  font-size:22px;
  text-align:left !important; 
  margin:11px auto !Important; 
}
#StatusID, #BranchID{
  height:32px !important; 
  line-height:32px !important; 
  font-size:15px !important; 
  padding:0 !important; 
}

.Status_ID_div, .Branch_ID_div{
  max-width:100% !important; 
}


/* Hero Background Squares and Hero Inner Box Formatting */
.heroDiv{
  max-height:590px !important; 
  height:587px !important; 
  max-width:1115px !important; 
  align-items:center !important; 
  margin:50px auto 0 auto !important;
  display: -webkit-box !important; 
    display: -moz-box !important; 
    display: -ms-flexbox !important; 
    display: -webkit-flex !Important; 
    display: flex !important; 
    -webkit-flex-direction: row !important; 
    justify-content: space-around !important; 
}

.heroInner h1{
  margin-top:0 !important; 
  font-family:"Monda", sans-serif !important; 
  font-size:35px !important; 
  color:#000; 
  font-weight:normal !important; 
  text-align:center !important; 
}

.heroInner .heroText{
      text-shadow: none !important;
    color: #000 !important; 
    font-weight: normal !important;
    font-size: 18px !important;
  padding-bottom:0 !important; 
  padding-top:10px !important; 
    font-family: "Arial", sans-serif !important;
}

.heroContainer{
  position:relative;
}
.heroInner{
      width: 90%;
    max-width: 550px;
      background-color: rgba(255, 255,255, 0.9);
    border-radius: 8px;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.heroDiv .one{
  background-image:url('/images/1562081511one.png');
}
.heroDiv .two{
    background-image:url('/images/1562082339two.png');
}
.heroDiv .three{
    background-image:url('/images/1562081578three.png');
}
.heroDiv .four{
    background-image:url('/images/MedalHome.png');
}
.heroDiv .five{
    background-image:url('/images/1562081615five.png');
}
.heroDiv .six{
    background-image:url('/images/1562081639six.png');
}


/* Responsive Hero Queries */

@media only screen and (min-width:1000px){
.heroDiv > .backgroundSquare{
    padding-top: 25%;
    height: 47%;
    margin: 10px;
    width: 31%;
    background-size: cover;
    background-repeat: no-repeat;
}

}

@media only screen and (max-width:999px) and (min-width:601px){
  html body .heroDiv >  .backgroundSquare {
	padding:0 !Important; 
    width: 48% !important;
    height: 50% !important; 
    margin: 1%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
 body .four, body .six{
    display:none !important; 
  }
  
 body .heroDiv{
    margin: 10px auto 0 auto !important; 
    justify-content: space-evenly !important; 
  }
}


@media only screen and (max-width:600px) and (min-width:359px){
#webSEO > h1 {
    text-align: center;
    color: #0C2243;
    font-weight: bold;
    font-size: 40px;
    margin: 20px 0px 0px !important; 
}
.heroDiv > .backgroundSquare {
    padding-top: 0 !important; 
    height: 31.33% !important; 
    margin: 1% !important; 
    width: 48% !important; 
    background-size: cover;
    background-repeat: no-repeat;
}
  
  .heroInner h1{
    font-size:24px !important; 
  }
  
  .heroInner .heroText{
    font-size:16px !important; 
  }
  
   body .heroDiv{
    margin: 10px auto 0 auto !important; 
  }
  .fieldHeader{
    font-size:19px !important; 
  }
  
  .heroDiv{
    height:100vw !important; 
    min-height:415px !Important; 
  }
  .heroInner{
    width:95% !important; 
    padding:15px !important; 
  }
  
}

@media only screen and (max-width:358px){
  
  #webSEO > h1 {
    text-align: center;
    color: #0C2243;
    font-weight: bold;
    font-size: 40px;
    margin: 20px 0px 0px !important; 
}
  .heroDiv > .backgroundSquare {
    padding-top: 0 !important; 
    height: 31.33% !important; 
    margin: 1% !important; 
    width: 48% !important; 
    background-size: cover;
    background-repeat: no-repeat;
}
   .heroDiv{
    height:100vw !important; 
    min-height:415px !Important; 
  }
  .heroInner{
    width:95% !important; 
    padding:15px !important; 
  }
  
     body .heroDiv{
    margin: 10px auto 0 auto !important; 
  }
  
  .fieldHeader {
    font-weight: bold;
    font-family: "Arial", sans-serif !important;
    font-size: 17px !important; 
    text-align: left !important;
    margin: 9px auto !Important;
}
  .heroInner .heroText{
    font-size:14px !important; 
  }
  
  .heroInner h1{ font-size:22px !important; }
}