*{
  margin:0px;
  padding:0px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', sans-serif;
  color:#080808;
  font-size:16px;
  margin: 0px;
}

h1{
  margin-bottom: 40px;
  margin-top: 0px;
  font-family: 'Roboto', sans-serif;
  font-size: 2.5em;
  font-weight: 900;
}

h2{
  margin-top: 0;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
}

h3{
  margin: 0 0 20px 0;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5em;
  font-weight: 900;
}

p{
  margin: 0 0 20px 0;
  line-height: 1.5em;
}

a{
  text-decoration: none;
  transition: .2s;
  color: #080808;
}

span{
  color: #fe0000;
}

ul{
  padding-left: 40px;
}

ul li{
  margin-bottom: 5px;
}

.center-text{
  text-align: center;
}

#homepage-hero{
 background: url(images/hero-blank.jpg) no-repeat center;
 background-size: cover;
}
#homepage-projects{
  background: url(images/building-background1.jpg) no-repeat center;
  background-size: cover;
}

#construction-management-hero{
  background: url(images/construction-management-hero.jpg) no-repeat 50% 40%;
  background-size: cover;
}
/*#construction-management-hero2{
  background: url(images/construction-management-hero-dark.jpg) no-repeat left center;
  background-size: cover;
}
#construction-management-hero2 h1{
  color: #ededed !important;
}*/
#pre-eng-hero{
  background: url(images/pre-eng-hero.jpg) no-repeat center;
  background-size: cover;
}
#commercial-hero{
  background: url(images/commercial-hero.jpg) no-repeat center;
  background-size: cover;
}
#community-hero{
  background: url(images/community-hero.jpg) no-repeat 50% 26%;
  background-size: cover;
}
#design-build-hero{
  background: url(images/design-build-hero.jpg) no-repeat 50% 60%;
  background-size: cover;
}
#gbc-hero{
  background: url(images/gbc-hero.jpg) no-repeat 50% 36%;
  background-size: cover;
}
#industrial-hero{
  background: url(images/industrial-hero.jpg) no-repeat 50% 50%;
  background-size: cover;
}
#public-works-hero{
  background: url(images/public-works-hero.jpg) no-repeat top center;
  background-size: cover;
}

.subpage-hero{
  background: url(images/blueprint-hero.jpg) no-repeat left center;
  background-size: cover;
}
.subpage-hero2{
  background: url(images/concrete-hero.jpg) no-repeat 50% 50%;
  background-size: cover;
}

.subpage-content p:last-child{
  margin-bottom: 0px;
}

.subpage-content p a{
  font-weight: bold;
  border-bottom:1px solid #fe0000;
}

.subpage-content p a:hover{
  color: #fe0000;
}

#contact-content a{
  font-weight: normal
}

img.angle1, img.angle2, img.angle3, img.angle4{
  margin: 0 60px;
}

img.angle1, img.angle2{
  margin-top: -20px;
}

img.angle3, img.angle4{
  margin-bottom: ;
}

img.angle2, img.angle4{
  right: 0;
  position: absolute;
}

.service-content {
  background: #f5f5f5;
}

.service-content .project{
  border:1px solid #E0E0E0;
}

h3.service-content-title{
  width: 100%;
  color: #080808;
  font-weight: normal;
  font-size: 2em;
  text-align: center;
  margin-bottom: 50px;
}

@media (min-width: 1100px) {

  .container {
    width:1100px;
    margin:0 auto;
  }

  .content{
    padding: 80px 0;
  }

  h2{
    font-size: 2em;
  }

  /*** HEADER DESKTOP STYLES ***/

  header{
    width: 100%;
    position: fixed;
    top: 0;
    min-height: fit-content;
    z-index: 110;
    transition: .6s;
    background: white;
  }

  #top-header{
    background: #080808;
    padding: 8px 0;
    color: #fff;
  }

  #top-header .container{
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #top-header a{
    color: #fff;
    margin-left: 20px;
    font-size: .9em;
  }

  #top-header a:hover{
   color: #fe0000;
  }

  #top-header i{
    color: #fe0000;
  }

  #nav{
    width: 100%;
    border-bottom: 1px solid #080808;
    padding: 15px 0 20px;
  }

  #nav .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }

  #nav img{
    width: 250px;
    height: auto;
    margin-top: 5px;
  }

  img.logo2{
    display: none;
  }

  .topnav{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /*width: 465px;*/
  }

  .topnav a{
    color: #080808;
    padding: 8px 16px;
    text-transform: uppercase;
    font-weight: bold;
  }

  .topnav a:hover{
    color: #fe0000;
  }

  #myTopnav a.icon{
    display: none;
  }

  /*dropdown menu styles*/

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .hidden {
    display: none;
    position: absolute !important;
    z-index: 1;
    padding-top: 10px;
  }

  .hidden a {
    color: #fff;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    background: rgba(0, 0, 0, .9);
    font-size: .8em;
    width: 180px;
    text-transform: none;
    transition: .2s ;
    /*border-top: 1px solid #222e4e;
    border-left: 1px solid #222e4e;
    border-right: 1px solid #222e4e;*/
  }

  .hidden a:hover{
    background-color: #fe0000;
    color: #fff;
    display: block;
    opacity: 1;
  }

  .dropdown:hover .hidden {
    display: block;
  }

  .dropbtn{
    cursor: default;
  }

  a.dropbtn:hover{
    color:#080808;
    background-color:transparent;
  }

  .hidden:hover{
      opacity: 1;
  }

  .hidden {
      animation: fadeIn .5s;
      -webkit-animation: fadeIn .5s;
      -moz-animation: fadeIn .5s;
      -o-animation: fadeIn .5s;
      -ms-animation: fadeIn .5s;
    }
    @keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    @-moz-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

  /***HERO DEKSTOP STYLES***/

  #homepage-hero{
    margin-top: 130px;
  }

  #homepage-hero .container{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    color: #080808;
    height: 600px;
    font-size: 1.2em;
  }

  #homepage-hero h1,
  #homepage-hero p{
    width: 500px;
  }

  #homepage-hero h1{
    font-weight: 900;
  }

  #homepage-hero p:last-child{
    margin-bottom: 70px;
  }

  /*MAIN BODY DESKTOP STYLES*/

  #homepage-family .container{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #homepage-family img{
    margin-right: 60px;
    width: 480px;
    height: auto;
  }

  #family-owned-text{
    margin-left: 60px;
  }

  p.check-mark{
    margin-bottom: 10px;
  }

  #homepage-projects h3{
    text-transform: uppercase;
    text-align: center;
  } 

  .projects-home-slick{
    margin-top: 60px;
  }

  .project-slick{
    background: white;
    width: 300px;
    margin: 0 auto;
  }

  .project-slick img{
    width: 300px;
    height: auto;
  }

  .project-text{
    padding: 20px;
  }

  .project-text h4{
    padding: 10px 0 10px 20px;
    border-left: 4px solid #fe0000;
    margin: 0 auto 10px;
  }

  .project-text p{
    font-size: .9em;
    height: 140px;
  }

  .project-text a{
    display: block;
    width: fit-content;
    color: #080808;
    font-weight: bold;
    border-bottom: 1px solid #fe0000;
  }

  .project-text a:hover{
    color: #fe0000;
  }

  /***SUBPAGE DESKTOP STYLES***/

  .subpage-hero{
    margin-top: 130px;

  }

  .subpage-hero .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #080808;
    height: 260px;
    font-size: 1.2em;
    padding-bottom: 60px;
  }  

  .subpage-hero h1{
    margin-bottom: 0px;
    padding: 20px 40px;
    min-width: 50%;
    text-align: center;
    background: rgba(255, 255, 255, .5);
    border:1px solid white;
  }

  /***SERVICE INDEX  DESKTOP STYLES***/

  #service-index .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  #service-index a{
    font-weight: bold;
    font-size: 1.15em;
  }

 /* #service-index a:hover{
    color: #fe0000;
  }*/

  /***OUR TEAM DESKTOP STYLES***/

  #team-content .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .team-text{
    width: 100%;
    margin-bottom: 20px;
  }

  .team-member{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px 20px;
    background: #f4f4f4;
    border: 1px solid lightgray;
    width: 280px;
    height: 180px;
    margin: 40px 0;
  }

  .team-member h3{
    margin-bottom: 0px;
  }

  .team-member span{
    font-style: italic;
    margin-bottom: ;
  }

  .team-member a{
    font-weight: normal;
  }

   /***PROJECTS DESKTOP STYLES***/

  .projects-gallery{
    position: relative;
    margin: 60px auto;
    width: 900px;
    padding: 40px 60px;
    background: #f8f9fa;
    border: 2px solid #080808;
  }

  .mySlides {
    display: none;
  }

  .mySlides img{
    max-width: 900px;
    display: block;
    margin: 0 auto;
  }

  .cursor {
    cursor: pointer;
  }

  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: #fff;
    background-color: #080808;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    /*border: 2px solid #080808 !important;*/
  }

  /* Position the "next button" to the right */
  .next {
    right: -80px;
    border-radius: 3px 0 0 3px;
  }

  .prev{
    left: -80px;
  }

  .prev:hover,
  .next:hover {
    background-color: #fe0000;
    color: #fff !important;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #080808;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    font-weight: bold;
    display: none;
  }

  /* Container for image text */
  .caption-container {
    text-align: center;
    background-color: #080808;
    padding: 10px;
    color: white;
    margin-bottom: 40px;
    /*margin-top: -4px;*/
  }

  .caption-container p{
    margin-bottom: 0px;
  }

  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  .row{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Six columns side by side */
  .column {
    /*float: left;
    width: 16.66%;*/
  }

  /* Add a transparency effect for thumnbail images */
  .demo {
    opacity: 0.5;
    transition: .2s;
  }

  .active,
  .demo:hover {
    opacity: 1;
    /*border: 1px solid #e7060d;*/
  }

  /***PROJECTS INDEX DESKTOP STYLES***/

  .project-content{
    padding-bottom: 20px;
  }

  .project-content .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .project{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    border:1px solid #EBEBEB;
    padding-bottom: 40px;
    margin-bottom: 60px;
  }

  .project img{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  .project h3{
    margin-bottom: 20px;
    padding:0 10px;
    text-align: center;
    height: 50px;
    font-size: 1.33em;
    display: flex;
    align-items: center;
  }

  .project a{
    display: block;
    text-align: center;
    font-weight: bold;
    background: #fe0000;
    color: white;
    width: 80%;
    padding:10px 0;
    box-shadow: 4px 4px 8px #cdcdcd;
    transition: .4s;
  }

  .project a:hover {
    background: #080808;
  }

  /*INDIVIDUAL PROJECT DESKTOP STYLES*/

  .individual-project-content .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }

  .individual-project-text{
    width: 800px;
    margin-bottom: 40px;
  }

  .individual-project-content img{
    width: 800px;
    height: auto;
    margin:0 20px 40px;
  }

  /***FOOTER DESKTOP STYLES***/

  footer{
    background: #080808;
    padding: 80px 0 40px;
    color: white;
  }

  footer .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
  }

  .footer-col{
    display: flex;
    flex-direction: column;
    margin: 0 40px;
  }

  .footer-col h3{
    text-transform: uppercase;
    font-size: 1.33em;
  }

  .footer-col p{
    margin-bottom: 10px;
  }

  .footer-col a{
    color: white;
  }

  .footer-col a:hover{
    color: #fe0000;
  }

  .footer-contact{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
  }

  .footer-contact:last-child{
    margin-bottom: 0px;
  }

  .footer-contact a{
    font-weight: bold;
  }

  .footer-contact i{
    color: #fe0000;
    font-size: 2em;
    margin-right: 20px;
  }

  #footer-img{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    margin: 60px 0 20px;
    padding-top: 60px;
    border-top: 1px solid white;
  }

  #footer-img p{
    width: 100%;
  }

  #footer-img img{
    width: 120px;
    height: auto;
  }

  #sub-footer{
    color: white;
    text-align: center;
    font-size: .9em;
    padding: 20px 0;
    background: #080808;
    border-top: 1px solid white;
  }

  #sub-footer a{
    color: white;
    border-bottom: 1px solid #fe0000;
  }

  #sub-footer a:hover{
    color: #fe0000;
  }
  
}

 @media (max-width: 1099px) {

  img.angle1, img.angle2, img.angle3, img.angle4{
    display: none;
}

  .content {
    padding: 60px 20px;
  }

  .container {
    width: 100%;
    margin: 0 auto;
  }

  h2{
    font-size: 1.5em;
  }

  /***** HEADER MOBILE STYLES *****/

  #top-header {
    display: none;
  }

  header{
    width: 100%;
    transition: 0.2s;
    position: fixed;
    top: 0;
    z-index: 110;
    background: #080808 !important; 
  }

  #nav{
    width: 100%;
  }

  #nav img{
    width: 190px;
    height: auto;
    margin: 15px 0 10px 20px
  }

  img.logo1{
    display: none;
  }

  /* Links inside the navbar */
  .topnav a { 
    float: left;
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  /* Add a background color to navbar links on hover */
  .topnav a:hover{
    background-color: #fe0000;
    color:#fff;
  }

  /* When the screen is less than 1099 pixels wide, hide all links. 
  Show the link that should open and close the topnav (.icon) */
  .topnav a{
    display:none;
  }

  .topnav a.icon {
    display: block;
    position: absolute;
    font-size: 30px;
    top: 3px;
    right: 0;
    float: right;
    margin: 0px 10px 10px 0;
    color: #fff;
    transition: unset;
  }

  .topnav a.icon:hover{
    background-color:transparent;
    color: #fff;
  }

   /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
  This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  .topnav.responsive {
    position: relative; 
    clear:both;
    /*margin-bottom:30px;*/
    margin-top: 0px;
  }
    .topnav.responsive a.icon {
      position: absolute;
      right: 0px;
      top: -72px;
      border-bottom:none;
      transition: unset;
    }

    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      border-bottom:1px solid #fff;
      padding-left: 30px;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }

    /* DROPDOWN MENU */

    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      text-align: left;
    }

    .topnav.responsive,
    .hidden {
      animation: fadeIn .5s;
      -webkit-animation: fadeIn .5s;
      -moz-animation: fadeIn .5s;
      -o-animation: fadeIn .5s;
      -ms-animation: fadeIn .5s;
    }
    @keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    @-moz-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    /* Dropdown Content */
    .hidden{
      display: none;
      margin: 10px 0;
    }

    .hidden a{
      margin-left: 25px !important;
      font-size: .9em;
      border-bottom: none !important;
    }

    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
    .show {display:block;}

    .dropbtn:hover{
      cursor: pointer;
    }

  /***HERO MOBILE STYLES***/

  #homepage-hero{
    margin-top: 76px;
  }

  #homepage-hero .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #080808;
    min-height: 400px;
  }

  #homepage-hero h1,
  #homepage-hero p{
  }

  #homepage-hero h1{
    font-weight: 900;
    font-size: 2em;
    text-align: center;
    margin-top: 10px;
  }

  
  /*MAIN BODY DESKTOP STYLES*/

  #homepage-family .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
  }

  #homepage-family img{
    padding:20px;
    padding-left: 15px;
    width: 100%;
    max-width: 400px;
    height: auto;
  }

  #family-owned-text{
    margin:20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 405px;
  }

  #family-owned-text h3{
    text-align: center;
  }

  p.check-mark{
    margin-bottom: 10px;
    width: 260px;
  }

  #homepage-projects h3{
    text-transform: uppercase;
    text-align: center;
  } 

  .projects-home-slick{
    margin-top: 60px;
  }

  .project-slick{
    background: white;
    max-width: 300px;
    margin: 0 auto;
  }

  .project-slick img{
    width: 100%;
    height: auto;
  }

  .project-text{
    padding: 20px;
  }

  .project-text h4{
    padding: 10px 0 10px 20px;
    border-left: 4px solid #fe0000;
    margin: 0 auto 5px;
    height: 42px;
    display: flex;
    align-items: center;
  }

  .project-text p{
    font-size: .9em;
    height: 185px;
  }

  .project-text a{
    display: block;
    width: fit-content;
    color: #080808;
    font-weight: bold;
    border-bottom: 1px solid #fe0000;
  }

  .project-text a:hover{
    color: #fe0000;
  }

  /***SUBPAGE MOBILE STYLES***/

  .subpage-hero{
    margin-top: 76px;
  }

  .subpage-hero .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #080808;
    height: 200px;
  }  

  .subpage-hero h1{
    margin-bottom: 20px;
    font-size: 2em;
    padding: 10px 20px;
    text-align: center;
    background: rgba(255, 255, 255, .4);
    border:1px solid white;
  }

  /***SERVICE INDEX DESKTOP STYLES***/

  #service-index .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  #service-index a{
    font-weight: bold;
    font-size: 1.15em;
  }

 /* #service-index a:hover{
    color: #fe0000;
  }*/

  /***OUR TEAM MOBILE STYLES***/

  #team-content .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
  }

  .team-text{
    width: 100%;
    margin-bottom: 20px;
  }

  .team-member{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px 20px;
    background: #f4f4f4;
    border: 1px solid lightgray;
    width: 280px;
    height: 180px;
    margin: 20px;
  }

  .team-member h3{
    margin-bottom: 0px;
  }

  .team-member span{
    font-style: italic;
    margin-bottom: ;
  }

  .team-member a{
    font-weight: normal;
  }

  /***PROJECTS MOBILE STYLES***/

  .projects-gallery{
    position: relative;
    margin: 60px auto;
    width: 100%;
    max-width: 900px;
  }

  .mySlides {
    display: none;
  }

  .cursor {
    cursor: pointer;
  }

  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: #e7060d;
    background-color: rgba(0, 0, 0, 0.8);
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    border: 1px solid #080808 !important;
  }

  /* Position the "next button" to the right */
  .next {
    right: -10px;
    border-radius: 3px 0 0 3px;
  }

  .prev{
    left: -10px;
  }

  .prev:hover,
  .next:hover {
   background-color: rgba(255, 255, 255, 0.8);
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  /* Container for image text */
  .caption-container {
    text-align: center;
    background-color: #080808;
    padding: 10px;
    color: white;
    margin-bottom: 40px;
    margin-top: -4px;
  }

  .caption-container p{
    margin-bottom: 0px;
  }

  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  .row{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Six columns side by side */
  .column {
    /*float: left;
    width: 16.66%;*/
  }

  /* Add a transparency effect for thumnbail images */
  .demo {
    opacity: 0.5;
    transition: .2s;
  }

  .active,
  .demo:hover {
    opacity: 1;
  }

  /***PROJECTS INDEX MOBILE STYLES***/

  .project-content .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
  }

  .project{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    border:1px solid #EBEBEB;
    margin:0 20px 40px;
    padding-bottom: 20px;
  }

  .project img{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  .project h3{
    margin-bottom: 20px;
    text-align: center;
    height: 58px;
    display: flex;
    align-items: center;
  }

  .project a{
    display: block;
    text-align: center;
    font-weight: bold;
    background: #fe0000;
    color: white;
    width: 80%;
    padding:10px 0;
    box-shadow: 4px 4px 8px #cdcdcd;
  }

  .project a:hover {
    background: #080808;
  }

  /*INDIVIDUAL PROJECT DESKTOP STYLES*/

  .individual-project-content .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }

  .individual-project-text{
    width: 100%;
    max-width: 800px;
    margin-bottom: 20px;
  }

  .individual-project-content img{
    max-width: 800px;
    width: 100%;
    height: auto;
    margin:0 10px 20px;
  }

 /***FOOTER DESKTOP STYLES***/

  footer{
    background: #080808;
    padding: 60px 20px 40px;
    color: white;
  }

  footer .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
    max-width: 400px;
  }

  .footer-col{
    display: flex;
    flex-direction: column;
  }

  .footer-col:first-child{
    width: 100%;
    align-items: center;
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid white;
  }

  .footer-col:nth-child(2){
    margin-bottom: 40px;
    width: 240px;
  }

  .footer-col:nth-child(2) p,
  .footer-col:nth-child(3) p{
    font-size: .9em;
  }

  .footer-col h3{
    text-transform: uppercase;
    font-size: 1.33em;
  }

  .footer-col p{
    margin-bottom: 10px;
  }

  .footer-col a{
    color: white;
  }

  .footer-col a:hover{
    color: #fe0000;
  }

  .footer-contact{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0;
    width: 245px;
  }

  .footer-contact:last-child{
    margin-bottom: 0px;
  }

  .footer-contact a{
    font-weight: bold;
  }

  .footer-contact i{
    color: #fe0000;
    font-size: 2em;
    margin-right: 20px;
  }

  #footer-img{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
  }

  #footer-img p{
    width: 100%;
  }

  #footer-img img{
    width: 120px;
    height: auto;
    margin: 20px;
  }

  #sub-footer{
    color: white;
    text-align: center;
    font-size: .9em;
    padding: 20px;
    background: #080808;
    border-top: 1px solid white;
  }

  #sub-footer a{
    color: white;
    border-bottom: 1px solid #fe0000;
  }

  #sub-footer a:hover{
    color: #fe0000;
  }
  
   
}