p
{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  color: black;
  font-weight: 300;
  font-size: 20px;
}

a
{
  text-decoration: none;
}

.italicized
{
  font-style: italic;
}

h3
{
  font-family: 'Lato', sans-serif;
  color: #444444;
  font-weight: 300;
  font-size: 20px;
}

h2
{
  font-family: 'Roboto Slab', serif;
  font-style: normal;
  font-weight: 100;
}

html
{
  padding-top: 0px;
  margin-top: 0px;
}

body
{
  margin: 0px;
}

ul
{
  list-style-type: none;
}

footer
{
  width: 100%;
  height: 40px;
  font-family: 'din-2014', sans-serif;
  font-weight: 300;
}

#footer
{
  font-family: 'din-2014', sans-serif;
  font-weight: 300;
}

#logo
{
  position: absolute;
  z-index: 800;
  left: 20px;
  top: 20px;
  transition: opacity 1s;

  animation: fadeIn 2s;
  animation-fill-mode: forwards;

  transition: opacity 200ms;
}

#hamburgerMenu
{
  background-color: none;
  width: 160px;
  position: absolute;
  z-index: 900;
  right: 20px;
  top: 20px;
  cursor: pointer;

  animation: fadeIn 2s;
  animation-fill-mode: forwards;

  transition: opacity 500ms;



}

#menuItemCont
{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 30px;
  margin-top: 300px;
  position: absolute;
  z-index: 500;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#menuItemHome
{
  color: white;
  text-align: center;
  padding-top: 40px;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  display: block;
  margin: 0 auto;
  width: 150px;

}

#menuItemHome:hover
{
  transform: scale(1.1);
}

#menuItemWork
{
  color: white;
  text-align: center;
  padding-top: 40px;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  display: block;
  margin: 0 auto;
  width: 150px;

}

#menuItemWork:hover
{
  transform: scale(1.1);
}

#menuItemServices
{
  color: white;
  text-align: center;
  padding-top: 40px;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  display: block;
  margin: 0 auto;
  width: 150px;

}

#menuItemServices:hover
{
  transform: scale(1.1);
}

#menuItemContact
{
  color: white;
  text-align: center;
  padding-top: 40px;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  display: block;
  margin: 0 auto;
  width: 150px;

}

#menuItemContact:hover
{
  transform: scale(1.1);
}


#menuCont
{
  background: rgb(47,47,47);
  background: linear-gradient(90deg, rgba(47,47,47,1) 0%, rgba(87,87,87,1) 100%);

  background-image: url(images/grain03.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  width: 0%;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  z-index: 500;
  margin: 0;
  padding: 0;
  transition: width 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

span {
  position: relative;
  display: block;
  cursor: pointer;
}

span:before, span:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 1px;
  top: 50%;
  margin-top: -0.5px;
  background: #fff;
}

span:before {
  left: -2.5px;
}
span:after {
  right: 2.5px;
  background: #fff;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

span:hover:before {
  background: #fff;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

span:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;
}


#menuLoop{
    background-color: #2F2F2F;
    /*transform: translate3d(0,0,0);*/
    width: 100%;
    position: absolute;
    z-index: -100;
}

#topBar
{
  height: 100px;
}

#infographic1{
    overflow: hidden;
    /*transform: translate3d(0,0,0);*/
    display: block;
    float: left;
    width: 50vw;
    padding-top: 50px;
    padding-left: 30px;
    /*padding-top: 100px;*/

    animation: fadeIn 2s;
    animation-fill-mode: forwards;
    transition: opacity 900ms;


    /*transition: logoSlide 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);*/
    /*

    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-fill-mode: backwards;*/
}

#videoLoop
{
  animation: fadeIn 2s;
  animation-fill-mode: forwards;
  transition: opacity 900ms;
}



#homeOutro{
    background-color: white;
    overflow: hidden;
    /*transform: translate3d(0,0,0);*/
    width: 80vw;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    z-index: -200;
}

#homeContentMask
{
  height: 600px;
}

#homeContent
{
  display: block;
  float: right;
  width: 39%;
  background-color: white;

  /*animation: slideFromRight 2s
  animation-delay: 3s;
  transition: slideFromRight 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: backwards;

  -webkit-animation: slideFromRight 2s;
  -webkit-animation-delay: 3s;
  -webkit-animation-fill-mode: backwards;*/

  transition: opacity 500ms;
}


.homeParagraph
{
  display: block;
  text-align: left;
  width: 70%;
  margin-left: 0px;
  color: black;
  font-size: 30px;
  margin-top: 250px;

  font-family: 'Playfair Display', serif;
  font-weight: 400;

  animation: slideUp 2s;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s;
  animation-fill-mode: backwards;
}

.homeParagraph02
{
  color: black;
  font-family: 'Roboto Slab', serif;
  font-weight: 400;

  animation: slideUp 2s;
  animation-delay: 250ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s;
  animation-fill-mode: backwards;
}

.homeParagraph03
{
  color: #4C4C4C;
  font-family: 'din-2014', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  width: 80%;

  animation: slideUp 2s;
  animation-delay: 250ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s;
  animation-fill-mode: backwards;
}

#CTACont
{
  margin-top: 20px;
  animation: slideUp 2s;
  animation-delay: 500ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s;
  animation-fill-mode: backwards;
  transition: all .5s;
  cursor: pointer;
  height: 50px;
  margin-bottom: 0px;
}

#viewWork
{
  float: left;
  color: black;
  font-family: 'din-2014', sans-serif;
  font-weight: 300;
  font-size: 20px;
  cursor: pointer;
  display: block;
  float: left;
  margin: 0;
  margin-top: 5px;


}

#arrow
{
  width: 80px;
  animation-fill-mode: backwards;
  margin-top: 0px;
  margin-left: 10px;
  transition: all .5s;
  display: block;
  float: left;
  cursor: pointer;
}



#CTACont:hover
{
  opacity: .5;
}

#CTACont:hover #arrow
{
  transform: translate(10px);
}



#CTACont02
{
  animation: slideUp 2s;
  animation-delay: 500ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s;
  animation-fill-mode: backwards;
  transition: all .5s;
  cursor: pointer;
  clear: left;
  height: 50px;
  margin-top: 0px;
}

#viewReel
{
  float: left;
  color: black;
  font-family: 'din-2014', sans-serif;
  font-weight: 300;
  font-size: 20px;
  cursor: pointer;
  margin: 0;
  margin-top: 5px;


}

#arrow02
{
  width: 80px;
  animation-fill-mode: backwards;
  margin-top: 0px;
  margin-left: 10px;
  transition: all .5s;
  display: block;
  float: left;
  cursor: pointer;
}



#CTACont02:hover
{
  opacity: .5;
}

#CTACont02:hover #arrow02
{
  transform: translate(10px);
}

footer
{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  text-align: center;
  font-size: 12px;
}

footer p
{
  font-size: 14px;
}

#viewServices
{
  background-color: white;
  border: 1px black solid;
  width: 300px;
  float: left;
  color: black;
  font-size: 24px;
  cursor: pointer;
  border-radius: 100px;
  text-align: center;
  padding: 10px 0px 10px 0px;

  margin-left: 20px;

  animation: slideUp 2s;
  animation-delay: 700ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s;
  animation-fill-mode: backwards;
  transition: all .5s;
}

#viewServices:hover
{
  font-size: 20px;
  background-color: #eaeaea;
}

#CTAButton
{
  border: none;
  text-align: center;
  width: 300px;
  margin-top: 0px;
  cursor: pointer;
  color: white;
  background-color: #d3c9bc;
  font-size: 24px;
  border-radius: 100px;
  padding-top: 10px;
  padding-bottom: 10px;
  float: left;

}

#CTAButton2
{
  border: 1px solid black;
  text-align: center;
  width: 300px;
  float: right;
  cursor: pointer;
  color: black;
  background-color: white;
  font-size: 24px;
  border-radius: 100px;
  padding-top: 10px;
  padding-bottom: 10px;
}


@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 100;
  }
}

@-webkit-keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 100;
  }
}

@keyframes slideUpWorkGrid {
  from {
    opacity: 100;
    transform: translateY(250px);
  }

  to {
    opacity: 100;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 100;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 100;
  }
}

@keyframes slideFromRight {
  from {
    transform: translateX(100vw);
  }

  to {
    transform: translateX(0vw);
  }
}

@-webkit-keyframes slideFromRight {
  from {
    /*transform: translateX(100vw);*/
    right: 0px;
  }

  to {
    /*transform: translateX(0vw);*/
    right: -50%;
  }
}

@keyframes slideFromLeft {
  from {
    transform: translateX(-100vw);
  }

  to {
    transform: translateX(0vw);
  }
}

@-webkit-keyframes slideFromLeft {
  from {
    /*transform: translateX(100vw);*/
    left: 0px;
  }

  to {
    /*transform: translateX(0vw);*/
    left: 50%;
  }
}

@keyframes logoSlide {
  from {
    left: 0px;
    /*transform: scale(1, 1);*/
    /*width: 100%;*/
  }

  to {
    left: -50%;
    /*transform: scale(.9, .9);*/
    /*width: 50%;*/
  }
}

@-webkit-keyframes logoSlide {
  from {
    left: 0px;
    /*transform: scale(1, 1);*/
    /*width: 100%;*/
  }

  to {
    left: -50%;
    /*transform: scale(.9, .9);*/
    /*width: 50%;*/
  }
}

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

  .homeParagraph
  {
    margin-top: 250px;
  }

  #viewWork
  {
    font-size: 24px;
  }

  #viewReel
  {
    font-size: 24px;
  }

  #viewServices
  {
    width: 250px;
    font-size: 24px;
  }

}

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

  .homeParagraph
  {
    margin-top: 200px;
    font-size: 40px;
  }

  #infographic1
  {
    margin-top: 50px;
  }

}


@media screen and (max-width: 1070px) {
  #infographic1 {
    width: 50vw;
    margin: 0 auto;
    display: block;
    float: none;
    text-align: center;
  }

  #homeContent
  {
    width: 100vw;
    float: none;
    margin: 0 auto;
    margin-top: 0px;
    height: auto;
  }


  .homeParagraph
  {
    margin-top: 0px;
    text-align: center;
    margin: 0 auto;
  }

  .homeParagraph02
  {
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
  }

  .homeParagraph03
  {
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
  }

  #CTACont
  {
    text-align: center;
    width: 100%;
    height: 50px;
  }

  #CTACont02
  {
    text-align: center;
    width: 100%;
    height: 200px;
  }

  #viewWork
  {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    float: none;
  }

  #arrow
  {
    display: inline-block;
    vertical-align: top;
    float: none;
  }

  #viewReel
  {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    float: none;
  }

  #arrow02
  {
    display: inline-block;
    vertical-align: top;
    float: none;
  }

  #viewServices
  {
    margin: 0 auto;
    float: none;
    display: inline-block;
    margin-left: 10px;
  }
}

@media screen and (max-width: 900px) {
  #infographic1 {
    width: 80vw;
  }
}

@media screen and (max-width: 600px) {
  .homeParagraphMobile
  {
    font-size: 18px;
    width: 80%;
    margin-top: 150px;
  }

  #viewWork
  {
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 10px;
  }

  #viewReel
  {
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 10px;
  }

  #viewServices
  {
    margin-right: 0px;
    margin-left: 0px;
    width: 80%;
    margin-top: 10px;
  }

  #infographic1
  {
    width: 100vw;
  }



  #menuItemCont
  {
    margin-top: 200px;
  }

  #menuLoop
  {
    margin-top: 200px;
  }
}



/*WORK PAGE*/

#pageTransitionCont
{
  width: 100%;
  height: 100%;
  background-color: none;
  position: absolute;
  z-index: 999;
  overflow: hidden;
  pointer-events: none;
}

#pageTransition
{
  width: 0%;
  height: 100%;
  background-color: white;
  position: absolute;
  z-index: 999;
  transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}


#workSideTab
{
  position: absolute;
  z-index: 100;
  width: 40px;
  left: 40px;
  top: 200px;
}

#workGridCont
{
  background-color: white;
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 100px;
  text-align: center;
}

#gridMask
{
  width: 25%;
  height: 250px;
  background-color: white;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: inline-block;
}

#gridMaskHidden
{
  width: 25%;
  height: 250px;
  background-color: white;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: none;
}

#workGrid1
{
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url(images/vivanextBackground.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: slideUpWorkGrid 2s;
  animation-delay: 0s;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: backwards;
  cursor: pointer;

}

#workGrid1:hover
{
  opacity: .8;
  transform: scale(1.02);
}

#workGrid2
{
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url(images/streetwiseBackground.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: slideUpWorkGrid 2s;
  animation-delay: 100ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: backwards;
  cursor: pointer;
}

#workGrid2:hover
{
  opacity: .8;
  transform: scale(1.02);
}

#workGrid3
{
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url(images/hyrBackground.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: slideUpWorkGrid 2s;
  animation-delay: 200ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: backwards;
  cursor: pointer;
}

#workGrid3:hover
{
  opacity: .8;
  transform: scale(1.02);
}

#workGrid4
{
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url(images/citronBackground.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: slideUpWorkGrid 2s;
  animation-delay: 300ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: backwards;
  cursor: pointer;
}

#workGrid4:hover
{
  opacity: .8;
  transform: scale(1.02);
}

#workGrid5
{
  width: 100%;
  height: 100%;
  background-color: black;
  background-color: black;
  background-image: url(images/trellisBackground.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: slideUpWorkGrid 2s;
  animation-delay: 400ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: backwards;
  cursor: pointer;
}

#workGrid5:hover
{
  opacity: .8;
  transform: scale(1.02);
}

#workGrid6
{
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url(images/iceRiverBackground.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: slideUpWorkGrid 2s;
  animation-delay: 500ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: backwards;
  cursor: pointer;
}

#workGrid6:hover
{
  opacity: .8;
  transform: scale(1.02);
}

#workGrid7
{
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url(images/loyaltyOneBackground.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: slideUpWorkGrid 2s;
  animation-delay: 600ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: backwards;
  cursor: pointer;
}

#workGrid7:hover
{
  opacity: .8;
  transform: scale(1.02);
}

#workGrid8
{
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url(images/westernTvBackground.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: slideUpWorkGrid 2s;
  animation-delay: 700ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: backwards;
  cursor: pointer;
}

#workGrid8:hover
{
  opacity: .8;
  transform: scale(1.02);
}

#workGrid9
{
  width: 100%;
  height: 100%;
  background-color: black;
  animation: slideUpWorkGrid 2s;
  animation-delay: 800ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: backwards;
  cursor: pointer;

  display: none;
}

#workGrid9:hover
{
  opacity: .8;
  transform: scale(1.02);
}


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

  #workSideTab
  {
    left: 10px;
    width: 30px;
  }

  #gridMask
  {
    width: 49%;
  }

  #gridMaskHidden
  {
    width: 49%;
  }

  #workGridCont
  {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media screen and (max-width: 700px) {
  #gridMask
  {
    width: 100%;
  }

  #gridMaskHidden
  {
    width: 100%;
  }
}





#servicesSideTab
{
  position: absolute;
  z-index: 300;
  width: 40px;
  left: 40px;
  top: 200px;
  transition: opacity 1s;
  opacity: .5;
}

#contactSideTab
{
  position: absolute;
  z-index: 300;
  width: 40px;
  left: 40px;
  top: 200px;
  transition: opacity 1s;
  opacity: .5;
}

#servicesSubHeading
{
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: #5b5a5a;
  margin-top: 50px;
  font-size: 24px;
  margin-left: 200px;
  width: 60%;
  display: block;
  float: left;
}

#servicesHeader
{
  font-size: 45px;
  font-family: 'Roboto Slab', serif;
  padding-top: 150px;
  margin-left: 200px;
  margin-top: 0px;
}

#servicesSubHeadingRight
{
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: #5b5a5a;
  margin-top: 50px;
  font-size: 24px;
  margin-right: 200px;
  display: block;
  float: right;
  width: 60%;
  text-align: right;
}

#servicesHeaderRight
{
  font-size: 45px;
  font-family: 'Roboto Slab', serif;
  padding-top: 150px;
  margin-right: 200px;
  margin-top: 0px;
  text-align: right;
}

#serviceDividerLeft
{
  height: 1px;
  width: 90px;
  background-color: black;
  margin-top: 10px;
  margin-left: 200px;
  float: left;
  display: block;
}

#serviceDividerRight
{
  height: 1px;
  width: 90px;
  background-color: black;
  margin-top: 10px;
  margin-right: 200px;
  float: right;
  display: block;
}

#listLeft
{
  float: none;
  clear: both;
  padding-left: 240px;
  padding-bottom: 20px;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: #5b5a5a;
}

#listDashLeft
{
  background-color: #5b5a5a;
  height: 1px;
  width: 80px;
  margin-top: 13px;
  margin-right: 10px;
  display: block;
  float: left;
}

#listLeft li
{
  margin-top: 10px;
}

#listRight
{
  float: none;
  clear: both;
  padding-right: 240px;
  padding-bottom: 20px;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: #5b5a5a;
  text-align: right;
}

#listDashRight
{
  background-color: #5b5a5a;
  height: 1px;
  width: 80px;
  margin-top: 13px;
  margin-left: 10px;
  display: block;
  float: right;
}

#listRight li
{
  margin-top: 10px;
}

@keyframes serviceSlideDown {
  from {
    opacity: 100;
    transform: translateY(200px);
  }

  to {
    opacity: 100;
  }
}

@-webkit-keyframes serviceSlideDown {
  from {
    opacity: 100;
    transform: translateY(200px);
  }

  to {
    opacity: 100;
  }
}

.servicesTestBottom
{
  width: 100vw;
  height: 200px;
  margin: 0px;
  padding: 0px;
  background-color: green;
  float: none;
  clear: both;
}

.servicesCTAMask
{
  width: 100vw;
  height: 200px;
  background-color: green;
  position: inherit;
  display: block;
  overflow: hidden;
  clear: both;
  float: none;

}

#servicesCTACont
{
  background-color: #d1d1d3;
  width: 100%;
  height: 200px;
  position: absolute;
  z-index: 99;
  bottom: 0px;
  float: none;
  clear: both;

  animation: serviceSlideDown 2s;
  animation-delay: 1000ms;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: backwards;
}

#servicesCTAHeader
{
  color: black;
  text-align: center;
  font-size: 32px;
  font-family: 'Roboto Slab', serif;
  margin-top: 0px;
  padding-top: 20px;
}

#servicesCTAButton
{
  color: black;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
  border: 1px solid black;
  border-radius: 100px;
  width: 250px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0 auto;
  cursor: pointer;
  transition: all 300ms;
}

#servicesCTAButton:hover
{
  background-color: rgba(0, 0, 0, 0.1);
}

#servicesSplitLeft
{
  width: 50vw;
  height: 100vh;
  background-color: white;
  animation: caseLeftSlide 2s;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#servicesSplitRight
{

  background-color: #efefef;
  animation: caseRightSlide 2s;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  width: 50vw;
  height: 100vh;
}

#servicesRightMask
{
  overflow: hidden;
  display: block;
  width: 50vw;
  height: 100vh;
  float: right;
  padding-top: 0px;
  margin-top: 0px;
}

#servicesLeftMask
{
  overflow: hidden;
  display: block;
  width: 50vw;
  height: 100vh;
  float: left;
  padding-top: 0px;
  margin-top: 0px;
}



@media screen and (max-width: 1270px) {
  #servicesLeftMask
  {
    width: 100%;
    height: auto;
  }

  #servicesRightMask
  {
    width: 100%;
    height: auto;
  }

  #servicesSplitRight
  {
    width: 100%;
    margin: auto;
    padding: none;
    height: auto;
  }

  #servicesSubHeading
  {
    margin: 0 auto;
    display: block;
    float: none;
    text-align: center;
    margin-top: 50px;
  }

  #servicesSubHeadingRight
  {
    margin: 0 auto;
    display: block;
    float: none;
    text-align: center;
    margin-top: 50px;
  }

  #listDashLeft
  {
    display: none;
  }

  #listLeft
  {
    text-align: center;
    display: block;
    float: none;
    margin: 0 auto;
    padding: 0;
    padding-bottom: 20px;
    margin-top: 20px;
  }

  #listDashRight
  {
    display: none;
  }

  #listRight
  {
    text-align: center;
    display: block;
    float: none;
    margin: 0 auto;
    padding: 0;
    padding-bottom: 20px;
    margin-top: 20px;
  }

  #servicesSplitLeft
  {
    width: 100%;
    margin: auto;
    padding-bottom: 100px;
    height: auto;
  }

  #serviceDividerLeft
  {
    margin: 0 auto;
    margin-top: 50px;
    float: none;
  }

  #serviceDividerRight
  {
    margin: 0 auto;
    margin-top: 50px;
    float: none;
  }

  #servicesCTACont
  {
    display: none;
  }

  #servicesHeader
  {
    display: block;
    margin: 0 auto;
    text-align: center;
  }

  #servicesHeaderRight
  {
    display: block;
    margin: 0 auto;
    text-align: center;
  }

  #servicesSplitRight
  {
    padding-bottom: 100px;
  }
}

@media screen and (max-width: 750px)
{
  #servicesSideTab
  {
    left: 5px;
  }

  #contactSideTab
  {
    left: 5px;
  }
}

@media screen and (max-width: 600px)
{
  #servicesSubHeading
  {
    font-size: 18px;
  }

  #servicesSubHeadingRight
  {
    font-size: 18px;
  }

  #listLeft
  {
    font-size: 18px;
  }

  #listRight
  {
    font-size: 18px;
  }

  #servicesHeader
  {
    font-size: 32px;
  }

  #servicesHeaderRight
  {
    font-size: 32px;
  }

  #serviceDividerLeft
  {
    width: 60px;
  }

  #servicesSideTab
  {
    width: 30px;
  }

  #contactSideTab
  {
    width: 30px;
  }
}

/*////////////////////////////////////////////////////////////////*/

#streetwiseSideTab
{
  position: absolute;
  z-index: 300;
  width: 40px;
  left: 40px;
  top: 200px;
}



@keyframes caseRightSlide {
  from {
    transform: translateX(50vw);
  }

  to {
    transform: translateX(0vw);
  }
}

@keyframes caseLeftSlide {
  from {
    transform: translateY(100vh);
  }

  to {
    transform: translateY(0vh);
  }
}

#caseHeader
{
  font-size: 45px;
  font-family: 'Roboto Slab', serif;
  margin-top: 150px;
  margin-left: 200px;
}

#caseDivider
{
  height: 1px;
  width: 90px;
  background-color: black;
  margin-top: 50px;
  margin-left: 200px;
}



#caseSubHeading
{
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: #5b5a5a;
  margin-top: 50px;
  font-size: 24px;
  margin-left: 200px;
}

#caseParagraph
{
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: #5b5a5a;
  margin-top: 50px;
  font-size: 20px;
  width: 60%;
  margin-left: 200px;
}

#caseButton
{
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: #5b5a5a;
  margin-top: 50px;
  font-size: 20px;
  width: 200px;
  margin-left: 200px;
  border: .5px solid #5b5a5a;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all 1s;
  cursor: pointer;
}

#caseButton:hover
{
  background-color: #efefef;
}

#streetwiseVideo
{
  width: 90%;
  display: block;
  margin: 0 auto;
  padding-top: 100px;
}

@media screen and (max-width: 1500px)
{
  #caseDivider
  {
    height: 1px;
    width: 90px;
    background-color: black;
    display: block;
    margin: 0 auto;
    margin-top: 50px;
  }

  #caseHeader
  {
    display: block;
    margin: 0 auto;
    margin-top: 150px;
  }

  #caseSubHeading
  {
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
    padding: 0;
    margin-bottom: 50px;
  }

  #caseParagraph
  {
    display: block;
    margin: 0 auto;
    margin-bottom: 50px;
  }

  #caseButton
  {
    display: block;
    margin: 0 auto;
  }
}

@media screen and (max-width: 1290px)
{
  #streetwiseVideo
  {
    margin-top: 100px;
  }
}

@media screen and (max-width: 1050px)
{
  #streetwiseVideo
  {
    margin-top: 150px;
  }
}

@media screen and (max-width: 990px)
{
  #caseRight
  {
    margin-top: 100px;
  }

  #caseRightViva
  {
    margin-top: 100px;
  }
}

/*----------------CONTACT-------------------*/

#leftSideContact
{
  width: 50%;
  display: block;
  float: left;
  height: 100vh;

  animation: fadeIn 2s;
  animation-fill-mode: forwards;

  transition: opacity 200ms;
}

#leftSideCase
{
  width: 50%;
  display: block;
  float: left;
  height: 100vh;
}

#formContainerMask
{
  width: 50%;
  display: block;
  float: right;
  height: 100vh;
  overflow: hidden;
}

#caseRightMask
{
  width: 50%;
  display: block;
  float: right;
  min-height: 100vh;
  overflow: hidden;
}



.formContainer
{
  background-color: #e5e5e5;
  width: 100%;
  display: block;
  float: right;
  height: 100vh;

  animation: fadeIn 2s;
  animation-fill-mode: forwards;

  transition: opacity 200ms;
}

#webDevContainer
{
  background-color: #efefef;
  width: 100%;
  display: block;
  float: right;
  height: 100vh;
}

#caseRight
{
  background-color: #efefef;
  width: 100%;
  display: block;
  float: right;
  min-height: 100vh;

}

#caseRightViva
{
  background-color: #eaeaea;
  width: 100%;
  display: block;
  float: right;
  min-height: 100vh;
}

.contactForm
{
  width: 550px;
  height: 750px;
  display: block;
  margin: 0 auto;
  padding: 40px;
  margin-top: 150px;
}

input {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;
  color: black;
  font-size: 24px;
  font-family: 'din-2014', sans-serif;
  font-weight: 300;
}

textarea {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;
  color: black;
  font-size: 24px;
  font-family: 'din-2014', sans-serif;
  font-weight: 300;
}

::placeholder
{
  color: black;
}

#nameInput
{
  width: 400px;
  border-bottom: 1px solid black;
  letter-spacing: normal;
  display: block;
  text-align: left;
  margin-bottom: 50px;
  color: black;
}

#emailInput
{
  width: 400px;
  border-bottom: 1px solid black;
  letter-spacing: normal;
  display: block;
  text-align: left;
  margin-bottom: 50px;
  color: black;
}

#messageInput
{
  width: 400px;
  height: 200px;
  border-bottom: 1px solid black;
  letter-spacing: normal;
  display: block;
  text-align: left;
  background-color: #e5e5e5;
  color: black;
}

#sendButton
{
  border: 1px solid black;
  letter-spacing: normal;
  padding: 10px;
  background-color: none;
  color: black;
  width: 150px;
  font-size: 24px;
  display: block;
  transition: all .5s;
  margin-top: 20px;
  cursor: pointer;
}

#sendButton:hover
{
  background-color: rgba(197, 197, 197, 1);
}

.streetHide
{
  display: none;
}

.headshot
{
  margin-top: 200px;
  margin: 0 auto;
  display: block;
  float: left;
}

.headshotMobile
{
  margin-top: 100px;
  margin-left: 100px;
  display: none;
  float: left;
  width: 200px;
}

.aboutPara
{
  display: block;
  float: left;
  width: 50%;
  margin-top: 150px;
  font-size: 24px;
  margin-left: 200px;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 30px;
  padding-top: 50px;
}

.aboutPara2
{
  display: block;
  float: left;
  width: 60%;
  margin-top: 0px;
  font-size: 16px;
  margin-left: 200px;
  font-family: 'din-2014', serif;
  font-weight: 400;
  font-size: 18px;
}

#clientsParagraph
{
  /*padding-left: 120px;*/
  width: 80%;
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  padding-top: 0px;
  color: black;
  font-size: 20px;
  background-color: white;
  text-align: center;
}

.clientLogo
{
  background-color: #d1d1d3;
  width: 125px;
  height: 100px;
  display: inline-block;
}

.aboutHeader
{
  width: 100%;
  text-align: center;
  float: none;
  clear: both;
  padding-top: 50px;
}

.clientsHeader
{
  width: 100%;
  text-align: center;
  float: none;
  clear: both;
  padding-top: 50px;
  margin-top: 0px;
}

.schoolLogos
{
  margin: 0 auto;
  display: block;
  text-align: center;
}

#logoMobile
{
  position: absolute;
  z-index: 800;
  right: 10px;
  top: 10px;
  display: none;
}

.clientsContMask
{
  clear: both;
  float: none;
  overflow: hidden;
  height: auto;
  width: 100%;
  margin-top: 0px;
  padding-top: 0px;
}

#clientsCont
{
  background-color: #d1d1d3;
  clear: both;
  float: none;
  height: auto;
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 50px;

  animation: slideUp 2s;
  animation-delay: 0s;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s;
  animation-fill-mode: backwards;

  -webkit-animation: slideUp 2s;
  -webkit-animation-delay: 0s;
  -webkit-animation-fill-mode: backwards;
}

#clientsParagraph
{
  background-color: #d1d1d3;

}

@media screen and (max-width: 1500px)
{
  .headshot
  {
    display: none;
  }

  .headshotMobile
  {
    width: 200px;
    padding-top: 100px;
    margin: 0 auto;
    display: block;
    text-align: center;
    clear: both;
    float: none;
  }

  #leftSideContact
  {
    text-align: center;
  }

  #leftSideCase
  {
    text-align: center;
  }

  .aboutPara
  {
    margin: 0 auto;
    clear: both;
    float: none;
    margin-top: 150px;
    width: 60%;
    text-align: left;
  }

  .aboutPara2
  {
    margin: 0 auto;
    clear: both;
    float: none;
    margin-top: 25px;
    font-size: 18px;
    width: 60%;
    text-align: left;
  }


  #caseRight
  {
    min-height: 100vh;
  }

  #caseRightViva
  {
    min-height: 100vh;
  }

  #messageInput
  {
    font-size: 20px;
  }

  #emailInput
  {
    font-size: 20px;
  }

  #nameInput
  {
    font-size: 20px;
  }

  #sendButton
  {
    font-size: 20px;
  }


}

@media screen and (max-width: 1277px)
{
  .contactForm
  {
    padding: 0px;
    width: 100%;
    min-height: 100%;
  }

  html
  {
    height: 100%;
  }

  body
  {
    height: 100%;
  }

  .formContainer
  {
    height: 100%;
  }

  #webDevContainer
  {
    height: 100%;
  }

  #caseRight
  {
    height: 100%;
  }

  #caseRightViva
  {
    height: 100%;
  }

  .aboutPara
  {
    width: 80%;
  }

  .aboutPara2
  {
    width: 80%;
  }

  #messageInput
  {
    width: 70%;
    margin-left: 40px;
    margin-right: 0px;
    padding: 0;
  }

  #emailInput
  {
    width: 70%;
    margin-left: 40px;
    margin-right: 0px;
    padding: 0;
  }

  #nameInput
  {
    width: 70%;
    margin-left: 40px;
    margin-right: 0px;
    padding: 0;
    margin-top: 200px;
  }

  #sendButton
  {
    margin-left: 40px;
  }
}

@media screen and (max-width: 990px)
{
  #leftSideContact
  {
    width: 100%;
    height: auto;
  }

  #leftSideCase
  {
    width: 100%;
    height: auto;
  }

  .aboutPara
  {
    width: 60%;
  }

  .aboutPara2
  {
    width: 60%;
  }

  #formContainerMask
  {
    width: 100%;
    margin: bottom: 0px;
    height: auto;
  }

  #caseRightMask
  {
    width: 100%;
    margin: bottom: 0px;
    height: auto;
  }

  .formContainer
  {
    width: 100%;
    height: auto;
    margin-top: 100px;
  }



  #webDevContainer
  {
    width: 100%;
    height: auto;
  }

  #caseRight
  {
    width: 100%;
    height: auto;
  }

  #caseRightViva
  {
    width: 100%;
    height: auto;
  }

  #sendButton
  {
    margin-bottom: 100px;
  }
}

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

  .aboutPara
  {
    width: 70%;
  }

  .aboutPara2
  {
    width: 70%;
  }
}

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

  .aboutPara
  {
    width: 80%;
  }

  .aboutPara2
  {
    width: 80%;
  }

  .schoolLogos
  {
    width: 100%;
  }
}

#thanksHeader
{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 35px;
  text-align: center;
  padding-top: 300px;
  margin-top: 0px;
}

#thanksPara
{
  text-align: center;
  font-size: 20px;
  font-family: 'din-2014', sans-serif;
  font-weight: 300;
}

#thanksButton
{
  text-align: center;
  border: 1PX solid black;
  cursor: pointer;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 200px;
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  transition: all 1s;
  font-family: 'din-2014', sans-serif;
  font-weight: 300;
}

#thanksButton:hover
{
  background-color: rgba(197, 197, 197, .5);
}

.iceRiverVideo
{
  display: block;
  margin: 0 auto;
  margin-top: 150px;
  width: 90%;
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    margin-top: 150px;
}
.video-responsive iframe{
    left:0;
    right: 0;
    top:0px;
    height:90%;
    width:90%;
    position:absolute;
    margin-left: auto;
    margin-right: auto;
}

.video-responsive2{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    margin-top: 50px;
}
.video-responsive2 iframe{
    left:0;
    right: 0;
    top:0px;
    height:90%;
    width:90%;
    position:absolute;
    margin-left: auto;
    margin-right: auto;
}

video {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.topVideo
{
  margin-top: 150px;
}

.secondVideo
{
  margin-top: 50px;
  margin-bottom: 50px;
}

.hyperMobile
{
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

.mobileIdentity
{
  display: none;
  width: 40%;
}

@media screen and (max-width: 650px)
{
  .mobileIdentity
  {
    display: block;
  }

  .desktopIdentity
  {
    display: none;
  }
}