body{
  font-family: canada-type-gibson, sans-serif;
margin: auto;
}



.navcontainer{
  color: #ffffff;
    overflow: hidden;
    margin-left: 10%;
}

.container{
  width: 80%;
      margin: auto;
      color: #ffffff;
      overflow: hidden;
      padding-top: 25vh;
      padding-bottom: 4em;
}

.containerwhite{
  width:80%;
  margin: auto;
  color: #000;
  overflow: hidden;
  animation: fadein 3s;
  padding-bottom: 3em;
}

.containerportfolio{
  margin: auto;
      color: #000;
      display: flex;
      padding-top: 25vh;
      padding-bottom: 8em;
      /* background: red; */
      text-decoration: none;
      /* overflow: hidden; */
      animation: fadein 3s;
      /* padding-left: 2em; */
      width: 80%;
}

.footercontainer{  padding-top: .5em;
      min-height: 1em;
      width: 100%;

}


.footercontainer a{
  color: #af0303;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: .05em;
      font-family: canada-type-gibson, sans-serif;
    font-weight: 100;
    font-style: normal;

}

.footercontainer ul{
  margin: 0;
  padding: 0;
  display: flex;
}

.footercontainer li{
  display: inline;
  padding-right: 2em;
  padding-bottom: 1.5em;
}


#showcase-portfolio-coffee{
    background-image: url(../img/cliffordsportfoliopagebanner.jpg);
    background-position: right;
    background-repeat: no-repeat;
}

#showcase-portfolio-ui{
    background-image: url(../img/uiportfoliopagebanner.jpg);
    background-position: right;
    background-repeat: no-repeat;
}

#showcase-portfolio-coffee .box-coffee{
  width:100%;
  text decoration:none;
  margin: auto;
  overflow: hidden;
  padding-bottom: 1.5em;
  color: #af0303;
  text-decoration: none;
}

#showcase-portfolio-ui .box-coffee{
  width:100%;
  text decoration:none;
  margin: auto;
  overflow: hidden;
  padding-bottom: 1.5em;
  color: #af0303;
  text-decoration: none;
}

#showcase-portfolio-ui a:hover{
    cursor: pointer;
    color: #e8491d;
    -webkit-transition: color .3s ease-out;
  -moz-transition: color .3s ease-out;
  -o-transition: color .3s ease-out;
  transition: color .3s ease-out;
}


#showcase-portfolio-coffee a:hover{
    cursor: pointer;
    color: #e8491d;
    -webkit-transition: color .3s ease-out;
  -moz-transition: color .3s ease-out;
  -o-transition: color .3s ease-out;
  transition: color .3s ease-out;
}

.blockCoffee{
  display: block;
  width: 100%;
  height: 65vh;
  border: none;

  background-color: rgba(#fff, 0.75);
  background-image: url("../img/cliffordsportfoliopagebanner.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin: auto;
      padding-left: 10%;
      padding-bottom: 2em;
      padding-top: 10%;
      text-align: left;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.blockCoffee a {
  text-align: left;
color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.blockCoffee:hover {

  background-image: url("../img/cliffordsportfoliopagebannerhover.jpg");
  transform: scale(1.02);
  transition: ease .1s;
    cursor: pointer;
    position: relative;
    color: #e8491d;
}

.blockCoffee:hover a{
  text-align: left;
color: #e8491d;
transition: ease .1s;
  text-decoration: none;
  cursor: pointer;}

.blockUI {
  display: block;
  width: 100%;
  height: 65vh;
  border: none;
  background-image: url("../img/uiportfoliopagebanner.jpg");
  background-position: right;
  background-repeat: no-repeat;
  margin: auto;
  padding-left: 10%;
  padding-bottom: 2em;
  padding-top: 10%;
  text-align: left;
color: #fff;
text-decoration: none;
cursor: pointer;
}

.blockUI a{
  text-align: left;
color: #fff;
  text-decoration: none;
  cursor: pointer;}



.blockUI:hover {
  background-image: url("../img/uiportfoliopagebannerhover.jpg");
  transform: scale(1.02);
  transition: ease .1s;
    cursor: pointer;
    position: relative;
    color: #e8491d;
}

.blockUI:hover a{
  text-align: left;
color: #e8491d;
transition: ease .1s;
  text-decoration: none;
  cursor: pointer;}


  .homeboxproject1 a {
    text-align: left;
  color: #e8491d;
    text-decoration: none;
    cursor: pointer;
  }

  .homeboxproject1:hover a{
    text-align: left;
  color: #e8491d;
    text-decoration: none;
    cursor: pointer;}


.homeboxproject1{
  float:left;
  width: 50%;
  padding: 1.5em;
      padding-left: 10%;
  background-image: url("../img/cliffordsbuttonhome.jpg");
  color: #e8491d;
  text-decoration: none;
  border: none;

}

.homeboxproject1:hover {
  background-image: url("../img/cliffordsbuttonhover.jpg");
  background-blend-mode: lighten;
  transform: scale(1.02);
  transition: ease .1s;
    cursor: pointer;
    color: #e8491d;
}



.homeboxproject2{
  float:left;
  width: 50%;
  padding: 1.5em;
      padding-left: 10%;
  background-image: url("../img/dailyUIbuttonhover.jpg");
  -webkit-transition: color .5s ease-out;
-moz-transition: color .5s ease-out;
-o-transition: color .5s ease-out;
transition: color .5s ease-out;
transition: transform .1s;
  color: #e8491d;
  text-decoration: none;
  border: none;

}


.homeboxproject2:hover {
  background-image: url("../img/dailyUIbuttonhover.jpg");
  background-blend-mode: lighten;
  transform: scale(1.02);
  transition: ease .1s;
    cursor: pointer;
    color: #e8491d;
}


  .homeboxproject2 a {
    text-align: left;
  color: #e8491d;
    text-decoration: none;
    cursor: pointer;
  }

  .homeboxproject2:hover a{
    text-align: left;
  color: #e8491d;
    text-decoration: none;
    cursor: pointer;}



  .boxproject1:hover {
    background-image: url("../img/cliffordsbuttonhover.jpg");
    transform: scale(1.02);
    transition: ease .1s;
      cursor: pointer;
      color: #e8491d;
  }


  .boxproject1{
    float:left;
    width: 50%;
    padding: 1.5em;
        padding-left: 10%;
    background-image: url("../img/cliffordsbutton.jpg");
    color: #fff;
    text-decoration: none;
    border: none;


  }

  .boxproject1 a {
    text-align: left;
  color: #fff;
    text-decoration: none;
    cursor: pointer;
  }

  .boxproject1:hover a{
    text-align: left;
  color: #e8491d;
    text-decoration: none;
    cursor: pointer;}


    .boxproject2:hover {
      background-image: url("../img/dailyUIbuttonhover.jpg");
      transform: scale(1.02);
      transition: ease .1s;
        cursor: pointer;
        color: #e8491d;
    }


    .boxproject2{
      float:left;
      width: 50%;
      padding: 1.5em;
          padding-left: 10%;
      background-image: url("../img/dailyUIbutton.jpg");
      -webkit-transition: color .5s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    transition: color .5s ease-out;
    transition: transform .1s;
      color: #fff;
      text-decoration: none;
      border: none;


    }

    .boxproject2 a {
      text-align: left;
    color: #fff;
      text-decoration: none;
      cursor: pointer;
    }

    .boxproject2:hover a{
      text-align: left;
    color: #e8491d;
      text-decoration: none;
      cursor: pointer;}

      .boxproject1footer{
        float:left;
        width: 100%;
        padding: 1.5em;
            padding-left: 10%;
        background-image: url("../img/cliffordsbutton.jpg");
        color: #fff;
        text-decoration: none;
        border: none;


      }


      .boxproject1footer:hover {
        background-image: url("../img/cliffordsbuttonhover.jpg");
        background-blend-mode: lighten;
        transform: scale(1.02);
        transition: ease .1s;
          cursor: pointer;
          color: #e8491d;
      }


      .boxproject1footer a {
        text-align: left;
      color: #fff;
        text-decoration: none;
        cursor: pointer;
      }

      .boxproject1footer:hover a{
        text-align: left;
      color: #e8491d;
        text-decoration: none;
        cursor: pointer;}





      .boxproject2footer{
        float:left;
        width: 100%;
        padding: 1.5em;
            padding-left: 10%;
        background-image: url("../img/dailyUIbutton.jpg");
        -webkit-transition: color .5s ease-out;
      -moz-transition: color .5s ease-out;
      -o-transition: color .5s ease-out;
      transition: color .5s ease-out;
      transition: transform .1s;
        color: #fff;
        text-decoration: none;
        border: none;

      }

      .boxproject2footer:hover {
        background-image: url("../img/dailyUIbuttonhover.jpg");
        background-blend-mode: lighten;
        transform: scale(1.02);
        transition: ease .1s;
          cursor: pointer;
          color: #e8491d;
      }


      .boxproject2footer a {
        text-align: left;
      color: #fff;
        text-decoration: none;
        cursor: pointer;
      }

      .boxproject2footer:hover a{
        text-align: left;
      color: #e8491d;
        text-decoration: none;
        cursor: pointer;}


.textcontainer{
  width:80%;
  margin: auto;
  background-color: #fff;
}

header{
  padding-top: .5em;
      min-height: 1em;
      position: absolute;
      background: none;
      width: 100%;
}

header a{
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: .05em;
      font-family: canada-type-gibson, sans-serif;
    font-weight: 100;
    font-style: normal;

}

header ul{
  margin: 0;
  padding: 0;
  display: flex;
}

header li{
  display: inline;
  padding-right: 2em;
  padding-bottom: 1.5em;
}

header #branding{
  padding-right: 3em;
  float: left;
}

a svg a:hover{
transform: scale(1.02);
fill: #000;
}

header nav{
  float: left;
  margin-top: 1em;
  color: #af0303;

}

header .highlight, header .current a{
  color: #eeeeee;
}

header a:active{
  color: #fcba03;
}

header a:hover{
color: #e8491d;
  cursor: pointer;
  -webkit-transition: color .3s ease-out;
-moz-transition: color .3s ease-out;
-o-transition: color .3s ease-out;
transition: color .3s ease-out;
}

a.ex1{color:#af0303;}

a.ex1:active{color: #eeeeee;}

a.ex1:hover{color: #color: #e8491d;
  transform: scale(1.02);
  transition: ease .5s;}

nav{
  float:left;
}

p{
  letter-spacing: .05em;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 100;
    font-style: normal;
    line-height: 1.6em;
    width: 50%;
}

b{font-weight: 400;}


h1{
  font-family: freight-big-pro, serif;

font-weight: 700;

font-style: normal;
  font-size: 3.75em;
  width: 60%;
  font-kerning: none;
}

h2{
  font-family: freight-big-pro, serif;
  font-weight: bold;
  width: 60%;
  font-kerning: none;
  font-size: 1.7em;
}

h3{
  font-family: freight-big-pro, serif;
  font-weight: bold;
  font-size: 1.2em;
  width: 60%;
  font-kerning: none;
}

ul{width: 50vh;
    letter-spacing: .05em;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 100;
    font-style: normal;
    line-height: 1.6em;
    width: 50%;
    padding-inline-start: 1.2em;
}

#showcasewhite{
  background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  min-height: 20em;
    padding-top: 14em;
    background-image: linear-gradient(to bottom left, #ececec, #ffffff);}

    #portfolio{
      display: grid;
      background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      min-height: 20em;
        padding-top: 6em;
        background-image: linear-gradient(to top left, #ececec, #ffffff);}



#showcase{
  background-position: center;
      background-repeat: no-repeat;
      background-size: 600%;
      height: 75vh;
      color: #ffffff;
      background-image: linear-gradient(-125deg, #af0303, #c31705, #ff5421);
          animation: gradient 7s infinite;
  }

  @keyframes gradient {
      	0% {
      		background-position: 0% 50%;
      	}
      	50% {
      		background-position: 100% 50%;
      	}
      	100% {
      		background-position: 0% 50%;
      	}
      }

#showcasecoffee{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
    background-image:url("../img/cliffordspage-img2.jpg");
}

#showcasecoffee2{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
    background-image:url("../img/cliffordspage-img3.jpg");
}

#showcasecoffee3{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
    background-image:url("../img/cliffordspage-img4.jpg");
}

#showcaseUI{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
    background-image:url("../img/dailyuipage-img1.jpg");
}

#showcaseUI2{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
    background-image:url("../img/dailyuipage-img2.jpg");
}

#boxes{
  background-color: #fff;
  overflow: hidden;
}

.projectcontainer{
  margin: auto;
      display: flex;
      flex-wrap: nowrap;
      height: 30vh;
}

.titlecontainer{
  margin-left: 10%;
}

#boxes a:hover{
  background-image: url("../img/cliffordsbutton.jpg");
  background-position: center;
  transform: scale(1.02);
    cursor: pointer;
    color: #e8491d;
}


.box{
  float:left;
  width: 50%;
  padding: 1.5em;
      padding-left: 10%;
  background-image: linear-gradient(to bottom left, #ececec, #ffffff);
  -webkit-transition: color .5s ease-out;
-moz-transition: color .5s ease-out;
-o-transition: color .5s ease-out;
transition: color .5s ease-out;
transition: transform .1s;
  color: #e8491d;
  text-decoration: none;


}



.coffeelogo {
  width: 250px;
}

.containerwhite-process{
  width:80%;
  margin: auto;
  color: #000;
  overflow: hidden;
  animation: fadein 3s;
  padding-bottom: 9em;
}

.containerwhite-process-last{
  width:80%;
  margin: auto;
  color: #000;
  overflow: hidden;
  animation: fadein 3s;
  height: 60vh;
}

@keyframes fadein {
  from{
    opacity: 0;
  }
  to {opacity: 1}

}





@media only screen and (max-width: 768px) {

  body{
    font-family: canada-type-gibson, sans-serif;
  margin: auto;
  }

  .navcontainer{
    color: #ffffff;
      overflow: hidden;
      margin-left: 10%;
  }

  .container{
    width: 80%;
        margin: auto;
        color: #ffffff;
        overflow: hidden;
        padding-top: 25vh;
  }

  .containerwhite{
    width:80%;
    margin: auto;
    color: #000;
    overflow: hidden;
    animation: fadein 3s;
  }

  .containerportfolio{
    width:80%;
    margin: inherit;
    color: #000;
    text-decoration: none;
    overflow: hidden;
    animation: fadein 3s;
  }

  .textcontainer{
    width:80%;
    margin: auto;
    background-color: #fff;
  }

  header{
    padding-top: .5em;
        min-height: 1em;
        position: absolute;
        background: none;
        width: 100%;
  }

  header a{
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: .05em;
        font-family: canada-type-gibson, sans-serif;
      font-weight: 100;
      font-style: normal;

  }

  header ul{
    margin: 0;
    padding: 0;
    display: flex;
  }

  header li{
    display: inline;
    padding-right: 2em;
    padding-bottom: 1.5em;
  }

  header #branding{
    padding-right: 3em;
    float: left;
  }

  header nav{
    float: left;
    margin-top: 1em;
    color: #af0303;

  }

  header .highlight, header .current a{
    color: #eeeeee;
  }

  header a:active{
    color: #fcba03;
  }

  header a:hover{
    color: #af0303;
    cursor: pointer;
    -webkit-transition: color .3s ease-out;
  -moz-transition: color .3s ease-out;
  -o-transition: color .3s ease-out;
  transition: color .3s ease-out;
  }

  a.ex1{color:#af0303;
  font-size: 1em;}

  a.ex1:active{color: #fcba03;}

  a.ex1:hover{color: #fff;}

  nav{
    float:left;
  }

a{
  color:#af0303;
  text-decoration: none;
}

  a:hover{
    color: #fff;
    cursor: pointer;
    -webkit-transition: color .3s ease-out;
  -moz-transition: color .3s ease-out;
  -o-transition: color .3s ease-out;
  transition: color .3s ease-out;
  }

  p{
    letter-spacing: .05em;
      font-family: canada-type-gibson, sans-serif;
      font-weight: 100;
      font-style: normal;
      line-height: 1.6em;
      width: 80%;
  }

  b{font-weight: 400;}


  h1{
    font-family: freight-big-pro, serif;

  font-weight: 700;

  font-style: normal;
    font-size: 3.5em;
    width: 80%;
  }

  h2{
    font-family: freight-big-pro, serif;
    font-weight: bold;
    width: 80%;
  }

  ul{width: 50vh;
      letter-spacing: .05em;
      font-family: canada-type-gibson, sans-serif;
      font-weight: 100;
      font-style: normal;
      line-height: 1.6em;
      width: 80%;
      padding-inline-start: 1.2em;
  }

  #showcasewhite{
    background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    min-height: 20em;
      padding-top: 14em;
      background-image: linear-gradient(to bottom left, #ececec, #ffffff);}




  #showcase{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 70vh;
      background: linear-gradient(-155deg, #ff5421, #af0303);
      color: #ffffff;
        background-size: 400%;
          animation: gradient 15s infinite;
  }

  @keyframes gradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

  #showcasecoffee{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
      background-image:url("../img/cliffordspage-img2-mobile.jpg");
  }

  #showcasecoffee2{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
      background-image:url("../img/cliffordspage-img3-mobile.jpg");
  }

  #showcasecoffee3{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
      background-image:url("../img/cliffordspage-img4-mobile.jpg");
  }

  #showcase-portfolio-coffee{
    background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    min-height: 20em;
  background-image: url("../img/cliffordsportfoliopagebanner.jpg");}

  #showcase-portfolio-coffee .box-coffee{
    width:100%;
    text decoration:none;
    margin: auto;
    overflow: hidden;
    padding: 1.5em;
    margin: .1em;
    color: #af0303;
    text-decoration: none;
  }
  #showcase-portfolio-coffee a:hover{
      cursor: pointer;
      color: #af0303;
      background-color: #fff;
  }


  #showcase-portfolio-ui .box-coffee{
    width:100%;
    text decoration:none;
    margin: auto;
    overflow: hidden;
    padding: 1.5em;
    margin: .1em;
    color: ##af0303;
    text-decoration: none;
  }

  #showcase-portfolio-ui a:hover{
      cursor: pointer;
      color: #fff;
      -webkit-transition: color .3s ease-out;
    -moz-transition: color .3s ease-out;
    -o-transition: color .3s ease-out;
    transition: color .3s ease-out;
  }

  .navcontainer{
    color: #ffffff;
      overflow: hidden;
      margin-left: 10%;
  }

    #showcase{
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
        color: #ffffff;
        height: 80%;
        background-image: linear-gradient(-125deg, #af0303, #c31705, #ff5421);
            animation: gradient 9s infinite;
    }









    .projectcontainer{
      margin: auto;
          display: block;
          height: 30%;
          overflow: hidden;
    }


        .boxproject1:hover {
          background-image: url("../img/cliffordsbutton.jpg");
          background-blend-mode: lighten;
          transform: scale(1.02);
          transition: ease .1s;
            cursor: pointer;
            color: #e8491d;
        }


        .boxproject1{
          float:left;
          width: 100%;
          padding: 1.5em;
              padding-left: 10%;
              padding-top: 20%;
          background-image: url("../img/cliffordsbutton.jpg");
  height: 30vh;
          color: #fff;
          text-decoration: none;
          border: none;


        }

        .boxproject1 a {
          text-align: left;
        color: #fff;
          text-decoration: none;
          cursor: pointer;
        }

        .boxproject1:hover a{
          text-align: left;
        color: #fff;
          text-decoration: none;
          cursor: pointer;}


          .boxproject2:hover {
            background-image: url("../img/uiportfoliopagebanner.jpg");
            background-blend-mode: lighten;
            transform: scale(1.02);
            transition: ease .1s;
              cursor: pointer;
              color: #e8491d;
          }


          .boxproject2{
            float:left;
            width: 100%;
            padding: 1.5em;
                padding-left: 10%;
                padding-top: 20%;
            background-image: url("../img/dailyUIbutton.jpg");
height: 30vh;
            color: #fff;
            text-decoration: none;
            border: none;


          }

          .boxproject2 a {
            text-align: left;
          color: #fff;
            text-decoration: none;
            cursor: pointer;
          }

          .boxproject2:hover a{
            text-align: left;
          color: #e8491d;
            text-decoration: none;
            cursor: pointer;}


            .blockCoffee{
              display: block;
              width: 100%;
              height: 75vh;
              border: none;
              background-image: url("../img/cliffordsportfoliopagebanner-mobile.jpg");
              background-position: right;
              background-repeat: no-repeat;
              margin: auto;
                  padding-left: 10%;
                  padding-bottom: 2em;
                  padding-top: 3em;
                  text-align: left;
              color: #fff;
              text-decoration: none;
              cursor: pointer;
            }

            .blockCoffee a {
              text-align: left;
            color: #fff;
              text-decoration: none;
              cursor: pointer;
            }

            .blockCoffee:hover {

              background-image: url("../img/cliffordsportfoliopagebanner-mobilehover.jpg");
            background-blend-mode: lighten;
              transform: scale(1.02);
              transition: ease .5s;
                cursor: pointer;
                position: relative;
                color: #e8491d;
            }

            .blockCoffee:hover a{
              text-align: left;
            color: #e8491d;
              text-decoration: none;
              cursor: pointer;}

            .blockUI {
              display: block;
              width: 100%;
              height: 75vh;
              border: none;
              background-image: url("../img/uiportfoliopagebanner-mobile.jpg");
              background-position: right;
              background-repeat: no-repeat;
              margin: auto;
              padding-left: 10%;
              padding-bottom: 2em;
              padding-top: 3em;
              text-align: left;
            color: #fff;
            text-decoration: none;
            cursor: pointer;
            }

            .blockUI a{
              text-align: left;
            color: #fff;
              text-decoration: none;
              cursor: pointer;}



            .blockUI:hover {
              background-image: url("../img/uiportfoliopagebanner-mobilehover.jpg");

              background-blend-mode: lighten;
              transform: scale(1.02);
              transition: ease .5s;
                cursor: pointer;
                position: relative;
                color: #e8491d;
            }

            .blockUI:hover a{
              text-align: left;
            color: #e8491d;
              text-decoration: none;
              cursor: pointer;}

              .boxproject1footer{
                float:left;
                width: 100%;
                padding: 1.5em;
                    padding-left: 10%;
                    padding-top: 20%;
                background-image: url("../img/cliffordsbutton.jpg");
              height: 30vh;
                color: #fff;
                text-decoration: none;
                border: none;


              }


              .boxproject2footer{
                float:left;
                width: 100%;
                padding: 1.5em;
                    padding-left: 10%;
                    padding-top: 20%;
              background-image: url("../img/uiportfoliopagebanner-mobile.jpg");
              height: 30vh;
                color: #fff;
                text-decoration: none;
                border: none;


              }

              #portfolio{
                overflow: hidden;
                background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                min-height: 20em;
                  padding-top: 11em;
                  background-image: linear-gradient(to top left, #ececec, #ffffff);}

                  .homeboxproject1 a {
                    text-align: left;
                  color: #e8491d;
                    text-decoration: none;
                    cursor: pointer;
                  }

                  .homeboxproject1:hover a{
                    text-align: left;
                  color: #e8491d;
                    text-decoration: none;
                    cursor: pointer;}


                .homeboxproject1{
                  float:left;
                  width: 100%;
                  padding: 1.5em;
                      padding-left: 10%;
                      padding-top: 20%;
                      height: 30vh;
                  background-image: url("../img/cliffordsbuttonhome.jpg");
                  color: #e8491d;
                  text-decoration: none;
                  border: none;

                }

                .homeboxproject1:hover {
                  background-image: url("../img/cliffordsbuttonhover.jpg");
                  background-blend-mode: lighten;
                  transform: scale(1.02);
                  transition: ease .1s;
                    cursor: pointer;
                    color: #e8491d;
                }



                .homeboxproject2{
                  float:left;
                  width: 100%;
                  padding: 1.5em;
                      padding-left: 10%;
                      padding-top: 20%;
                      height: 30vh;
                  background-image: url("../img/dailyUIbuttonhover.jpg");
                  -webkit-transition: color .5s ease-out;
                -moz-transition: color .5s ease-out;
                -o-transition: color .5s ease-out;
                transition: color .5s ease-out;
                transition: transform .1s;
                  color: #e8491d;
                  text-decoration: none;
                  border: none;

                }


                .homeboxproject2:hover {
                  background-image: url("../img/dailyUIbuttonhover.jpg");
                  background-blend-mode: lighten;
                  transform: scale(1.02);
                  transition: ease .1s;
                    cursor: pointer;
                    color: #e8491d;
                }


                  .homeboxproject2 a {
                    text-align: left;
                  color: #e8491d;
                    text-decoration: none;
                    cursor: pointer;
                  }

                  .homeboxproject2:hover a{
                    text-align: left;
                  color: #e8491d;
                    text-decoration: none;
                    cursor: pointer;}



}