@charset "UTF-8";

div.projectFeature
{
   width: 100%;
   margin-top: 3em;
}

div.projectFeature div.image
{
   position: relative;
   width: 100%;
}

div.projectFeature div.image img.expander
{
   width: 100%;
}

div.projectFeature div.image img.project
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

div.projectFeature div.details
{
   width: 92%;
   margin-right: 4%;
   margin-left: 4%;
}

div.projectFeature div.details h4
{
   width: 80%;
   margin-top: 0.5em;
   margin-bottom: 0.25em;
   color: #000000;
   font-family: HN67;
   font-size: 35px;
   font-weight: normal;
   line-height: 1.25em;
   text-transform: lowercase;
}

div.projectFeature div.details p
{
   margin-bottom: 1em;
   color: #333333;
   font-size: 17px;
}

div.projectFeature div.details h4 a,
div.projectFeature div.details p a,
div.projectFeature div.details h4 a:visited,
div.projectFeature div.details p a:visited
{
   color: #000000;
}

div.projectFeature div.details h4 a:hover,
div.projectFeature div.details p a:hover
{
   color: #333333;
}

div.projectFeature div.details div.detailBorder
{
   width: 100%;
   height: 1px;
   margin-bottom: 1em;
   background-color: #333333;
}

div.projectFeature div.details a.all
{
   color: #000000;
   font-family: HN47;
   font-size: 18px;
   font-weight: bold;
}

div.projectFeature div.details a.all:hover
{
   color: #333333;
}

div.projectFeature div.details a.all.desktop
{
   display: none;
}

div.projectFeature div.details a.all.mobile
{
   display: block;
}

@media (min-width: 767px)
{
   div.projectFeature
   {
      position: relative;
      margin-top: 6em;
   }

   div.projectFeature div.image
   {
      width: 58%;
      margin: 0;
   }

   div.projectFeature div.details
   {
      position: absolute;
      bottom: 0;
      width: 38%;
      margin: 0;
   }

   div.projectFeature.left div.image
   {
      float: left;
   }

   div.projectFeature.left div.details
   {
      right: 0;
      float: right;
      margin-right: 0;
      margin-left: 3%;
   }

   div.projectFeature.right div.image
   {
      float: right;
   }

   div.projectFeature.right div.details
   {
      left: 0;
      float: left;
      margin-right: 3%;
      margin-left: 0;
   }

   div.projectFeature div.details div.detailBorder
   {
      margin-bottom: 0;
   }

   div.projectFeature div.details h4
   {
      font-size: 45px;
   }

   div.projectFeature div.details a.all
   {
      margin-bottom: 2em;
      font-size: 24px;
   }

   div.projectFeature div.details h4,
   div.projectFeature div.details p,
   div.projectFeature div.details a.all
   {
      width: 55%;
      margin-left: 0;
      padding-left: 5%;
   }

   div.projectFeature.right div.details h4,
   div.projectFeature.right div.details p,
   div.projectFeature.right div.details a.all
   {
      width: 55%;
      margin-right: 0;
      margin-left: 45%;
      padding-left: 0;
      text-align: right;
   }

   div.projectFeature div.details a.all.desktop
   {
      display: block;
   }

   div.projectFeature div.details a.all.mobile
   {
      display: none;
   }
}