/*
  WRFriel.css
  Created by Brian Frick, © 2015 Frick Solutions & WR Friel Excavating 
  For information about this stylesheet, please contact Info@FrickSolutions.com
*/

* {
  /* A quick css reset */
  margin: 0;
  padding: 0;
}

h1 {
 font-size: medium;
 font-weight: bold;
 padding-bottom: 1%;
 }

  h2 {
  font-size: medium;
  font-style: italic;
  font-weight:bold;
  padding-bottom: .25%;
   }
 h3 
 {
 font-size: medium;
 font-weight:normal;
 padding-bottom: 1%;
  }
  h4 {
  font-size: medium;
  font-style: italic;
  font-weight: normal;
   }
  h5{
  font-size: smaller;
  font-weight:lighter; 
  
   }

body {
  font-family: "Roboto", sans-serif;
  padding-left: 2.5%;
  padding-right: 2.5%;
  background-color:#909090;
}

.headImage 
{ 
width: 100%;
height: auto;
text-align:center;
line-height:0;
font-size:0;
}

@media screen and (min-width:30em) {  /*~600px and higher */
  
    .navElements 
  {
    padding-left: 1%;
    font-size: medium;
    padding-bottom: .25%;
    padding-top: .25%;
    background-color: #373737; 
  }
  
  .navElements li 
  {
    color: white;
    display: inline-block;
    margin-right: 1vw;
    text-decoration: none;  
  }
  
  a:link, a:visited 
  {
    color: white;
    text-decoration: none;  
  }
  
  a:hover 
  {
    color: grey;
    text-decoration: none;  
  }
  
  .bodySection2
  {
    background-color:white;
    padding-top: 2%;
    padding-bottom: 2%; 
    padding-left: 1%;
    padding-right: 1%;    
    /* Makes the .section's height match */
    display: flex;
    justify-content: space-around;
    overflow: hidden;
  }
  
  .contactSection
  {
    background-color:white;
    /*padding-top: 2%; */
    padding-bottom: 2%; 
    text-align: left;
    max-width: 100%;
    padding-left: 1%;
    padding-right: 1%;
    
  }
   .contactSection2
  {
    background-color:white;
    /*padding-top: 2%; */
    padding-bottom: 2%; 
    text-align: left; 
    width: 98%;
    padding-left: 1%;
    padding-right:1%;
    align-content: space-around;
  }
  .contactSection img 
  {
  width: 100%; 
  }
  
  .contentSection img 
  {
   /* position: relative;
    float: left; */
    width: 50%;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
   }
  
  .section 
  {
    width: 40%;
    border: 4px solid #F44336;
    padding: 1%;
    text-align: center;
    background-color:white;
  }
  
  .sectionImg 
  {
    width: 75%;
    height: 35%;
    display:block;
    margin:auto;
    background-color:white;
  }
    .section a:link  
   {
    color: black;
    text-decoration: none; 
   }
   .section a:visited 
   {
    color: black;
    text-decoration: none; 
    }
  
   .section a:hover 
   {
    color: grey;
    text-decoration: none; 
   }
   
  .contentSection 
  {
    width: 40%;
    padding-left: 1%;
    padding-right: 1%;
    background-color:white;
    text-align:left;
  }
  
   .contentSection2
  {
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
    background-color:white;
    text-align:left;
    padding-top: 1%;

  }
  
  .contentSection2 img 
  {
    width: 20%;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover; 
    display: inline;
    margin-left: auto;
    margin-right: auto;
   }
   
   .imgHolder
   {
    margin: 5px;
    padding: 5px;
 /*   border: 1px solid #0000ff; */
    width: 22.5%; 
    float: left;
    text-align: center;
    }
    .imgHolder img 
    {
    display: inline;
    width: 100%;
    margin: 5px;
    border: 1px solid #ffffff;
    border-radius: 50%;
     }
     
     .imgDesc {
      text-align: center;
      font-weight: normal;
      width: 100%;
      margin: 5px;
      }
  
  .childContentSection 
  {
   padding-left: .5%;
   padding-bottom: .5%;
   width: 35%;
   max-width: 40%;
   }
  .contentSection ul
  {
 list-style-type:none;
   }
   
   .childContentSection ul
   {
   list-style-type:none;
    }
 
   .contentSection a:link  
   {
    color: black;
    text-decoration: none; 
   }
   .contentSection a:visited 
   {
    color: black;
    text-decoration: none; 
    }
  
   .contentSection a:hover 
   {
    color: grey;
    text-decoration: none; 
   }
    .footBar 
  {
    padding-left: 1%;
    font-size: medium;
    padding-bottom: .5%;
    padding-top: .5%;
    background-color: #373737; 
    color: white;
  }
  
  .myText
{
    box-sizing:border-box; 
    width: 340px; 
    }
.myArea
{
box-sizing:border-box;
width: 340px;

 }
 
}



@media screen and (max-width:30em)  /* for displays 30em and lower (~600px) */
{ 

  .navLogo 
  {
    background-color: #373737;
    width: 100%;
    height: 10vh; 
    margin: 0;
    font-size: 0; /*setting font size to zero removes spacing between divs, must reset size in next style*/
  }
  
  .navElements 
  {
 
   font-size: medium;
   padding-left: 1vw;
   padding-right: 1vw;
   padding-bottom: 1vh;
   background-color: #373737;
   bottom: 0;
   margin: 0;
   text-align:left;
   padding-right: 2vw; 
  }
  
  .navElements li 
  {
    color: white;
    display: inline-block;
    text-decoration: none;  
    font-size: 10px;
    text-align: left;
  }
  
  .navElements li:after
  {
      content: " | "; /*break up links if they are displayed in line */
  }  
    
  a:link, a:visited 
  {
    color: white;
    text-decoration: none;   
  }
  
  a:hover 
  {
    color: grey;
    text-decoration: none;  
  }
    
  .bodySection2
  {
    background-color:white;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 2%;
    padding-bottom: 2%; 
     display: flex;
    justify-content: space-around;
    overflow: hidden;
  }
  
  .section 
  {
    /* Removed height: 90% */
    font-size: medium;
    width: 96%;
    border: 4px solid #F44336;
    padding: 1%; 
    text-align: center;
    margin-bottom: 1vh;
    background-color: white;
  }
  
  .sectionImg 
  {
   width: 75%;
   height: 35%;
   display:block;
   margin:auto; 
  }
   
   .section a:link  
   {
    color: black;
    text-decoration: none; 
   }
   .section a:visited 
   {
    color: black;
    text-decoration: none; 
    }
  
   .section a:hover 
   {
    color: grey;
    text-decoration: none; 
   }
   
  .contactSection
  {
    background-color:white;
    
    padding-bottom: 2%; 
    text-align: left;
    max-width: 100%;
    padding-left: 1%;
    padding-right:1%;
    overflow: hidden;    
  }
 
  .contactSection img 
  {
  width: 100%; 
  }

   
    .contentSection 
  {
    /* Removed height: 90% */
    font-size: medium;
    width: 96%;
    padding-left: 1%;
    padding-right:1%;
    margin-bottom: 1vh;
    background-color: white;
    text-align:left;
  }
   .contentSection li 
  {
    color: black;
   /* display: inline-block; */
    text-decoration: none;  
    font-size: 14px;
    text-align: left;
  }
   .contentSection ul
  {
 list-style-type:none;
   }
   
    .contentSection a:link  
   {
    color: black;
    text-decoration: none; 
   }
   .contentSection a:visited 
   {
    color: black;
    text-decoration: none; 
    }
  
   .contentSection a:hover 
   {
    color: grey;
    text-decoration: none; 
   }
   .childContentSection {
   padding-left: .5%;
   padding-top: .5%;
   padding-bottom: .5%;
   max-width: 50%;
   }
   .contentSection img 
  {
   /* position: relative;
    float: left; */
    width: 50%;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
  
   }
   .childContentSection ul
   {
   list-style-type:none;
    }
   .footBar 
  {
    padding-left: 1%;
    font-size: medium;
    padding-bottom: .5%;
    padding-top: .5%;
    background-color: #373737; 
    color: white;
  }
  
  .myText
{
    box-sizing:border-box;
    width: 100%; 
    }
    
.myArea
{
box-sizing:border-box;
width: 100%;

 }
  
   .contactSection2
  {
    background-color:white;
    /*padding-top: 2%; */
    padding-bottom: 2%; 
    text-align: left;
    vertical-align:middle;
    width: 98%;
    padding-left: 1%;
    padding-right:1%;
    
  }
  
   .contentSection2
  {
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
    background-color:white;
    text-align:left;
    padding-top: 1%;
  }
   .imgHolder
   {
    margin: 5px;
    padding: 5px;
 /*   border: 1px solid #0000ff; */
    width: 22.5%; 
    float: left;
    text-align: center;
    }
    .imgHolder img 
    {
    display: inline;
    width: 100%;
    margin: 5px;
    border: 1px solid #ffffff;
    border-radius: 50%;
     }
     
     .imgDesc {
      text-align: center;
      font-weight: normal;
      width: 100%;
      margin: 5px;
      }
}