@import url(base.css);

/*

orange: #f07722  rgb(240,119,34)
blue: #11b4e4   rgb(17,180,228)
purple: #a8228c rgb(168,34,140)
yellow: #fbda1f rgb(251,218,31)
grey: #ada6a2
black: #000

*/

*{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}
body,
html{
  height: 100%;
}
p, ol, ul, li, h3, h4, h5, h6{
  font-family: "proxima-nova-n1","proxima-nova",sans-serif;
  font-style: normal;
  font-weight: 300;
}
img{
  max-width: 100%;
}
a:link{
  color: inherit;
  text-decoration: none;
}
a:visited{
  color: inherit;
}
h1{
  font-family: "jubilat-n4","jubilat",sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 4em;
}
.int-body h2{
  color: #f07722;
}
.middle{
  position: relative;
  left: 0; right: 0; margin: auto;
  width: 90%;
  max-width: 1120px;
  /*min-width: 320px;*/
}
.active{
  color: rgba(255,255,255, 1);
}

.orangeToBlue{
  background: #f07722; /* Old browsers */
  background: -moz-linear-gradient(left,  #f07722 0%, #11b4e4 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f07722), color-stop(100%,#11b4e4)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #f07722 0%,#11b4e4 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #f07722 0%,#11b4e4 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #f07722 0%,#11b4e4 100%); /* IE10+ */
  background: linear-gradient(to right,  #f07722 0%,#11b4e4 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f07722', endColorstr='#11b4e4',GradientType=1 ); /* IE6-9 */
}
.blueToOrange{
  background: #f07722; /* Old browsers */
  background: -moz-linear-gradient(right,  #f07722 0%, #11b4e4 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, right top, left top, color-stop(0%,#f07722), color-stop(100%,#11b4e4)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(right,  #f07722 0%,#11b4e4 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(right,  #f07722 0%,#11b4e4 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(right,  #f07722 0%,#11b4e4 100%); /* IE10+ */
  background: linear-gradient(to left,  #f07722 0%,#11b4e4 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f07722', endColorstr='#11b4e4',GradientType=1 ); /* IE6-9 */
}
.orangeToPurple{
  background: #f07722; /* Old browsers */
  background: -moz-linear-gradient(left,  #f07722 0%, #a8228c 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f07722), color-stop(100%,#a8228c)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #f07722 0%,#a8228c 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #f07722 0%,#a8228c 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #f07722 0%,#a8228c 100%); /* IE10+ */
  background: linear-gradient(to right,  #f07722 0%,#a8228c 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f07722', endColorstr='#a8228c',GradientType=1 ); /* IE6-9 */
}
.purpleToOrange{
  background: #f07722; /* Old browsers */
  background: -moz-linear-gradient(right,  #f07722 0%, #a8228c 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, right top, left top, color-stop(0%,#f07722), color-stop(100%,#a8228c)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(right,  #f07722 0%,#a8228c 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(right,  #f07722 0%,#a8228c 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(right,  #f07722 0%,#a8228c 100%); /* IE10+ */
  background: linear-gradient(to left,  #f07722 0%,#a8228c 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f07722', endColorstr='#a8228c',GradientType=1 ); /* IE6-9 */
}
.orangeToYellow{
  background: #f07722; /* Old browsers */
  background: -moz-linear-gradient(left,  #f07722 0%, #fbda1f 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f07722), color-stop(100%,#fbda1f)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #f07722 0%,#fbda1f 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(180deg,  #f07722 0%,#fbda1f 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #f07722 0%,#fbda1f 100%); /* IE10+ */
  background: linear-gradient(to right,  #f07722 0%,#fbda1f 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f07722', endColorstr='#fbda1f',GradientType=1 ); /* IE6-9 */
}
.yellowToOrange{
  background: #f07722; /* Old browsers */
  background: -moz-linear-gradient(right,  #f07722 0%, #fbda1f 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, right top, left top, color-stop(0%,#f07722), color-stop(100%,#fbda1f)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(right,  #f07722 0%,#fbda1f 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(180deg,  #f07722 0%,#fbda1f 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(right,  #f07722 0%,#fbda1f 100%); /* IE10+ */
  background: linear-gradient(to left,  #f07722 0%,#fbda1f 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f07722', endColorstr='#fbda1f',GradientType=1 ); /* IE6-9 */
}
.purpleToYellow{
  background: #a8228c; /* Old browsers */
  background: -moz-linear-gradient(left,  #a8228c 0%, #fbda1f 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a8228c), color-stop(100%,#fbda1f)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #a8228c 0%,#fbda1f 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #a8228c 0%,#fbda1f 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #a8228c 0%,#fbda1f 100%); /* IE10+ */
  background: linear-gradient(to right,  #a8228c 0%,#fbda1f 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8228c', endColorstr='#fbda1f',GradientType=1 ); /* IE6-9 */
}
.yellowToPurple{
  background: #a8228c; /* Old browsers */
  background: -moz-linear-gradient(right,  #a8228c 0%, #fbda1f 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, right top, left top, color-stop(0%,#a8228c), color-stop(100%,#fbda1f)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(right,  #a8228c 0%,#fbda1f 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(right,  #a8228c 0%,#fbda1f 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(right,  #a8228c 0%,#fbda1f 100%); /* IE10+ */
  background: linear-gradient(to left,  #a8228c 0%,#fbda1f 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8228c', endColorstr='#fbda1f',GradientType=1 ); /* IE6-9 */
}
.blueToYellow{
  background: #11b4e4; /* Old browsers */
  background: -moz-linear-gradient(left,  #11b4e4 0%, #fbda1f 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#11b4e4), color-stop(100%,#fbda1f)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #11b4e4 0%,#fbda1f 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #11b4e4 0%,#fbda1f 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #11b4e4 0%,#fbda1f 100%); /* IE10+ */
  background: linear-gradient(to right,  #11b4e4 0%,#fbda1f 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11b4e4', endColorstr='#fbda1f',GradientType=1 ); /* IE6-9 */
}
.yellowToBlue{
  background: #11b4e4; /* Old browsers */
  background: -moz-linear-gradient(right,  #11b4e4 0%, #fbda1f 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, right top, left top, color-stop(0%,#11b4e4), color-stop(100%,#fbda1f)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(right,  #11b4e4 0%,#fbda1f 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(right,  #11b4e4 0%,#fbda1f 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(right,  #11b4e4 0%,#fbda1f 100%); /* IE10+ */
  background: linear-gradient(to left,  #11b4e4 0%,#fbda1f 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11b4e4', endColorstr='#fbda1f',GradientType=1 ); /* IE6-9 */
}
.blueToPurple{
  background: #11b4e4; /* Old browsers */
  background: -moz-linear-gradient(left,  #11b4e4 0%, #a8228c 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#11b4e4), color-stop(100%,#a8228c)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #11b4e4 0%,#a8228c 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #11b4e4 0%,#a8228c 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #11b4e4 0%,#a8228c 100%); /* IE10+ */
  background: linear-gradient(to right,  #11b4e4 0%,#a8228c 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11b4e4', endColorstr='#a8228c',GradientType=1 ); /* IE6-9 */
}
.purpleToBlue{
  background: #11b4e4; /* Old browsers */
  background: -moz-linear-gradient(right,  #11b4e4 0%, #a8228c 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, right top, left top, color-stop(0%,#11b4e4), color-stop(100%,#a8228c)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(right,  #11b4e4 0%,#a8228c 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(right,  #11b4e4 0%,#a8228c 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(right,  #11b4e4 0%,#a8228c 100%); /* IE10+ */
  background: linear-gradient(to left,  #11b4e4 0%,#a8228c 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11b4e4', endColorstr='#a8228c',GradientType=1 ); /* IE6-9 */
}
.yellowUnderline{
   border-bottom: 6px solid #fbda1f;
}
.purpleUnderline{
  border-bottom: 6px solid #a8228c;
}
.blueUnderline{
  border-bottom: 6px solid #11b4e4;
}
/******************/
/*MAIN MENU STYLES*/
/******************/
#v1,#v2,#v3,#h1,#h2,#h3{
  transition: .33s all;
}
#massLogo:hover #v1,
#massLogo:hover #v2,
#massLogo:hover #v3{
  opacity: 0;
}
#massLogo:hover #h1,
#massLogo:hover #h2,
#massLogo:hover #h3{
  transform: translateY(-30px);
  -webkit-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
}
#massLogo:active #h1{
  transform: translateY(-40px);
  -webkit-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  transition: .1s all;
}
#massLogo:active #h3{
  transform: translateY(-20px);
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  transition: .1s all;
}
#massLogo{
  cursor: pointer;
  height: 100%;
}

#menu{
  position: fixed;
  height: 100%;
  width: 60px;
  left: 0px;
  top: 0px;
  background-color: rgba(0,0,0, .92);
  z-index: 999;
/*  overflow-x: hidden;
  overflow-y: auto;*/
/*  -webkit-filter: blur(1px);  */
}
#menu .container{
  padding-top: 50px;
  /*margin-top: 75px;*/
  margin: 0;
}
.tooltip{
  position: absolute;
  /*margin-left: -17px;*/
  z-index: -100;
  padding: 0 15px; 
  height: 0px; width: 150px;
  line-height: 50px;
  background-color: rgba(0,0,0, .92);
  text-transform: none;
  text-shadow: 1px 1px rgba(0,0,0, .92);
  font-weight: 400;
  color: #fff;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  top: 0; left: -15px;
  transition: .5s all;
}
#address{
/*   float: right; */
}
#menu h1{
  font-family: "jubilat-n1","jubilat",sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1.5em;
  display: inline-block;
  margin: .2em;
  float: left;
  clear: both;
  color: rgba(255,255,255,0.35);
}
#massLogo{
  padding: 8px;
  float: left;
}
#menu-toggle{
  width: 85px;
  height: 120px;
  position: absolute;
  left: 0;
  cursor: pointer;
  z-index: 100;
}
#menu-items{
    min-height: 400px;
    position: relative;
    float: left;
    clear: left;
    margin-right: 10px;
    font-family: "proxima-nova-n1","proxima-nova",sans-serif;
    font-style: normal;
    font-weight: 100;
    color: rgba(255,255,255,0.35);
    font-size: 1.5625em;
    text-align: left;
    /*visibility: hidden;*/
    display: table;
    padding: 0;
    min-width: 60px;
}
#menu-items li:hover{
  color: #fff;
}
#menu .icon{
  font-size: 1.3em;
  display: inline;
  margin-left: 10px;
}
#menu li{
  display: table-row;
  width: 100%;
  position: relative;
  text-transform: uppercase;
  height: 50px;
}
#menu li a{
  display: table-cell;
  vertical-align: middle;
  color: inherit; text-decoration: none;
  position: relative;
}
#menu li:hover .tooltip
/*#menu-items:hover .tooltip*/{
  visibility: visible;
  height: 50px;
  margin-left: 17px;
  opacity: 1;
  text-transform: none;
}
#menu li a:hover{
  color: rgba(255,255,255, 1);
}
#menu li a:hover span{
  color: rgba(255,255,255, 1);
}
#menu span{
  position: absolute;
  left: -100px;
  top: 10px;
  opacity: 0;
}
#menu-items,
#mass-logo-menu{
  margin-top: 25px;
}
#mass-logo-menu{
  width: 300px;
}
#wordmark{
  padding: 10px;
  opacity: 0;
  left: -100px;
  position: relative;
  display: none;
}
#menu-contact-form{
  height: 0px;
  float: left;
  border-left: 2px solid rgba(255,255,255,0.35);
  /*overflow: hidden;*/
}
#menu-map,
#menu-form{
  width: 98%;
  margin: 1%;
  background: transparent;
  opacity: 0;
  position: relative;
  min-height: 150px;
}
#menu-map{
  left: 100%;
}
#menu-form{
  bottom: -300px;
  font-weight: 400;
}
#social-icons{
  margin-top: 150px;
/*750*/
}
.ss-twitter
,.ss-facebook{
  float: left;
  font-size: .8em;
  margin-left: 6px;
  color: #fff;
}

#mobile-menu-button{

}
#mobile-menu,#mobile-menu #menu-items{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 999;
  display: table;
  margin-top: 0; padding-top: 50px;
  height: 90%;
  top: 10%;
  transition: .2s all linear;
  -webkit-transition: .2s all linear;
}
#mobile-menu{
  top: -100% ;
  background: rgba(0,0,0,.95);
}
#mobile-menu #menu-items{
  left: -100%;
  opacity: 0;
}
#mobile-menu li{
  display: table-row;
}
#mobile-menu li a{
  display: table-cell;
  vertical-align: middle;
  text-indent: 25px;
}
#mobile-menu .icon{
  display: inline-block;
}
#mobile-menu-header{
  position: fixed;
  top: 0; padding: 10px 0px;
  width: 100%; height: 50px;
  background: #000;
  z-index: 999;
  display: none;
}
#mobile-menu-button{
  height: 100%;
  transition: .2s all;
  cursor: pointer;
}
#mobile-menu #social-icons{
  margin-left: 22px;
}
/*******************/
/*HOMEPAGE SECTIONS*/
/*******************/

/*All Sections*/
#section2 .middle,
#section3 .middle{
  width: 80%;
}
#section1,
#section2,
#section3,
#section4,
#footer{
  /*padding: 150px 87px 0 87px;*/
  position: relative;
  overflow: hidden;
  text-align: center;
  width: calc(100% - 60px);
  margin-left: 60px;
}
#section1 h1,
#section2 h1,
#section3 h1,
#section4 h1{
  font-family: "proxima-nova-n7","proxima-nova",sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2.625em;
}
#section2 p,
#section3 p{
  font-weight: 400;
  margin: 20px auto;
  width: 80%;
}
.amp{
  font-family: "jubilat",sans-serif;
  font-style: normal;
  color: #fff;
}
/*Section 1*/

#section1{
  background: url(/assets/img/vid-ticker-bg.jpg) no-repeat center top;
  background-size: cover;
  /*text-shadow: 1px 1px #000;*/
  text-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
}
#section1 h1{
  font-family: "jubilat-n1","jubilat",sans-serif;
  font-style: normal;
  font-weight: 100;
  font-size: 6.5em;
  color: #fff;
}
#section1 p{
  color: #fff;
  font-size: 2.3125em;

}
#section1 p span{
  font-weight: bold;
}
#section1 h1, #section1 p, #section1 p span{
  margin-bottom: 50px;
}
 #section1 #vert-logo{
  margin-bottom: 40px;
 }
#chevron-cutout{
  position: absolute;
  left: 0;right: 0;bottom: 0;
  width: 100%;
}
#down-arrow{
  display: block;
  position: relative;
  left: 0; right: 0; margin: auto;
  margin-bottom: 100px;
}
video#section1-vid{
    position: absolute;
    top: 0%; left: 0%; right: 0;
    min-width: 100%;
    min-height: 100%;
   /* z-index: -1000;*/
}

/*Section 2*/

#section2{
  min-height: 500px; /*FOR TESTING*/
  background: #fff url(../img/home-page-about.jpg) no-repeat center top;
  background-size: cover;
  color: #333;
}
#section2 h1{

}
#section2 h1, #section2 p{
  margin-bottom: 50px;
}
#section2 p{
  text-align: left;

  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
#see-our-story{
  height: 42px; line-height: 42px;
  background: #000; color: #fff;
  text-align: center;
  padding: 0 15px; margin: 50px auto;
  width: 200px;
  position: relative;
}
#left-underline,
#right-underline{
  position: absolute;
  bottom: 8px; height: 2px;
  background: #000;
  transition: .5s all;
  /*width: 0;*/
}
#left-underline,
#right-underline{
  left: 115px;
  right: 115px;
}
#see-our-story:hover #left-underline{
  left: 15px;
  background: #fff;
  /*width: 100px;*/
}
#see-our-story:hover #right-underline{
  right: 15px;
  background: #fff;
  /*width: 100px;*/
}
#gradient-fadeout {
  position: absolute;
  left: 0;
  top: -2px;
  right: 0;
  width: 100%;
  height: 250px;
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 48%, rgba(255,255,255,0.87) 55%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(48%,rgba(255,255,255,1)), color-stop(55%,rgba(255,255,255,0.87)), color-stop(100%,rgba(255,255,255,0)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 48%,rgba(255,255,255,0.87) 55%,rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 48%,rgba(255,255,255,0.87) 55%,rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 48%,rgba(255,255,255,0.87) 55%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 48%,rgba(255,255,255,0.87) 55%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
#section2{
  padding-top: 250px;
}
/*Section 3*/

#section3{
  min-height: 500px;
  padding-top: 75px;
  padding-bottom: 50px;
  background: #000 url(../img/home-page-art-and-design.jpg) no-repeat center top;
  background-size: cover;
}
#section3 h1, #section3 p{
  color: #fff;
  margin-bottom: 20px;
}
#section3 .middle.middle-spots{
  min-width: 840px;
}
#spots{
  position: relative;
  width: 840px;
  left: 0; right: 0; margin: auto;
}
#spots > div{
  float: left;
  height: 150px; width: 170px;
  margin: 20px;
}
#spots > div .spot{
  height: 150px; width: 150px;
  border-radius: 100%;
  background-color: #fff;
  position: relative;
  left: 0; right: 0; margin: auto;
  z-index: 1;
}
/*orange: #f07722  rgb(240,119,34)
blue: #11b4e4   rgb(17,180,228)
purple: #a8228c rgb(168,34,140)
yellow: #fbda1f rgb(251,218,31)*/
#spot1:hover .spot{
  -webkit-box-shadow: 0px 0px 0px 8px rgba(240, 119, 34, 0.75);
  -moz-box-shadow:    0px 0px 0px 8px rgba(240, 119, 34, 0.75);
  box-shadow:         0px 0px 0px 8px rgba(240, 119, 34, 0.75);
}
#spot2:hover .spot{
  -webkit-box-shadow: 0px 0px 0px 8px rgba(17, 180, 228, 0.75);
  -moz-box-shadow:    0px 0px 0px 8px rgba(17, 180, 228, 0.75);
  box-shadow:         0px 0px 0px 8px rgba(17, 180, 228, 0.75);
}
#spot3:hover .spot{
  -webkit-box-shadow: 0px 0px 0px 8px rgba(168, 34, 140, 0.75);
  -moz-box-shadow:    0px 0px 0px 8px rgba(168, 34, 140, 0.75);
  box-shadow:         0px 0px 0px 8px rgba(168, 34, 140, 0.75);
}
#spot4:hover .spot{
  -webkit-box-shadow: 0px 0px 0px 8px rgba(251, 218, 31, 0.75);
  -moz-box-shadow:    0px 0px 0px 8px rgba(251, 218, 31, 0.75);
  box-shadow:         0px 0px 0px 8px rgba(251, 218, 31, 0.75);
}
.spotlight-image{
  height: 100%; width: 100%;
  border-radius: 100%;
  z-index: -1;
  background-size: cover !important;
  opacity: 1;
  transition: .33s all;
}

.spotlight-title{
  position: absolute;
  bottom: -45px;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: .33s all;
}
.spotlight-image:hover .spotlight-title{
  opacity: 1;
}

/*Section 4*/

#section4{
  min-height: 500px; /*FOR TESTING*/
}

/***************/
/*FOOTER STYLES*/
/***************/

#footer{
  height: auto;
  background-color: #fff;
  clear: both;
  border-top: 1px solid #ada6a2;
  padding-top: 50px;
}
#footer .middle{
  max-width: 314px;
}
#footer p{
  text-align: center
}
#footer-logo{
  margin: 50px auto 20px auto;
  min-width: 90%;
}


/****************/
/*INTERIOR PAGES*/
/****************/

.modal{
  height: 100%;
  width: calc(100% - 40px);
  position: fixed;
  top: 0; bottom: 0; left: 100%;
  background: rgba(0,0,0,.5);
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-interior{
  height: 100%;
  width: 100%;
  position: relative;
}
.grid_12{
  margin-bottom: 0;
}
.int-body{
  width: 100%;
  width: calc(100% - 60px);
  margin-left: 60px;
}
.int-blog .container{
  max-width: none;
}

/*Portfolio AND Blog*/

.int-body p{
  /*margin: 20px 20%;*/
  margin: 20px 0;
  line-height: 1.6em;
}
.int-body p a,
#blog-entry-content p a{
  color: #f07722;
}
.int-body p a:hover,
#blog-entry-content p a:hover{
  text-decoration: underline;
}
.int-body h1{
  margin-bottom: 25px;
  font-family: "jubilat-n1","jubilat",sans-serif;
  text-align: center;
}
.int-body blockquote p{
  margin: 20px 0% 20px -20%;
  width: 120%;
  font-family: "jubilat-n1","jubilat",sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.5em;
  position: relative;
}
.int-body blockquote p:before{
  /*content: "ʽʽ";*/
  content: "“";
  font-family: "jubilat-n1","jubilat",sans-serif;
  font-weight: 100;
  position: absolute;
  left: -55px; top: -25px; 
  color: rgba(0,0,0, .5);
  line-height: 1;
  z-index: -1;
  font-size: 6em;
}
.int-body .header-image{
  height: 300px;
  width: 100%;
  background-size: cover;
/*  background-attachment: fixed;*/
  background-position: center top;
  background-repeat: no-repeat;
  /*border-bottom: 1px solid #000;*/
  margin-bottom: 30px;
}
.int-body blockquote p:after{
  /*content: "ʼʼ";*/
  content: "”";
  position: relative;
  /*left: -55px; top: -25px; */
  color: rgba(0,0,0, .8);
  z-index: -1;
}
.int-body .grid_3{
  width: 18%;
  position: relative;
}
.int-body .grid_6{
  width: 60%;
}
 #small-header-image{
  max-width: 50%;
  margin-left: 25%;
  margin-top: 50px;
}
.author{
  width: 15%;
  position: absolute;
/*  top: 30px; right: 0;*/
  top: 0;
}
#author-portrait{
  width: 166px; height: 166px;
  border-radius: 100%;
  background-size: cover !important;
}
#author-portrait, .author p{
  max-width: 166px;
  margin: 0;
  text-align: center;
  margin-bottom: 5px;
}
#author-int{
  position: absolute;
  top: 0;
}
#disqus_thread{
  margin: 50px 20% 50px 20%;
  padding-top: 50px;
  border-top: 1px solid #000;
}
#clientCatalog,
#blogCatalog{
  position: fixed;
  height: 100%; width: 100%;
  overflow: hidden;
  left: 0px; right: 0; top: -120%; bottom: 100%;
  background: #fff;
  z-index: 99;
  width: calc(100% - 60px);
  margin-left: 60px;
}
#clientCatalogInt,
#blogCatalogInt{
  position: absolute; left: 0; top: 0;
  height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden;
  width: calc(100% + 20px);
}
.client,
.entry,
.first-entry{
  position: relative;
  width: 50%; min-height: 300px;
  float: left;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover !important;
}
.entry{
  outline: 1px solid #000;
}
.entry,
.first-entry{
  width: 100%;
  /*padding-left: 10%;*/
  /*padding-right: 10%;*/
  background: #fff;
/*  transition: .3s all ease-in-out;
  -webkit-filter: saturate(0%);
  filter: saturate(0%);*/
}
.entry:hover,
.first-entry:hover{
/*  -webkit-filter: saturate(100%);
  filter: saturate(100%);*/
}

.entry h1,
.first-entry h1{
  text-align: center;
  margin: 80px 80px 20px 80px; 
  font-weight:200;
  font-size: 3em;
  color: #000;
  z-index: 100;
}
.entry p,
.first-entry p{
  max-width: 70%;
  text-align: center;
  margin: 25px 15%;
  color: #000;
  font-weight: 400;
}
.first-entry{
  height: auto;
  min-height: 300px;
  padding-top: 5%;
}
.first-entry h1{
  font-size: 4.5em;
  margin-bottom: 20px;
  font-weight: 400;
  text-transform: uppercase;
}
.entry-overlay{
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  z-index: -1;
  background-color: rgba(0,0,0,0);
}
.first-entry:hover,
.entry:hover{
  background: url(../img/BraceLeft.svg) no-repeat left center;
  background-size: contain !important;
}
.first-entry:hover .entry-overlay,
.entry:hover .entry-overlay{
  background: url(../img/BraceRight.svg) no-repeat right center;
  background-size: contain !important;
}
.blog-tag h1{
  margin-top: 0;
}
.blog-tag h4{
  margin-top: 50px;
  text-align: center;
}
.blog-tag a{
  font-weight: 200;
}
.blog-tag a:hover{
  text-decoration: underline;
}
.blog-tag h3, .blog-tags h3{
  font-family: "jubilat-n1","jubilat",sans-serif;
  font-weight: 400;
}
.blog-tag, .blog-tags{
  min-height: 500px
}
#back-to-blog{
  text-align: center;
  margin-bottom: 50px;
}
#blog-tags{
  margin-top: 25px;
  max-width: 166px;
  font-size: .9em;
}
#blog-tags p{
  display: inline-block;
  text-align: left;
}
#blog-tags a:hover p{
  text-decoration: underline;
}
.entry-date{
  text-decoration: underline;
  font-weight: bold;
}
#next-arrow{
  float: right;
  margin-left: 25px;
}
#prev-arrow{
  float: left;
  margin-right: 25px;
}
#entry-prev-next{
  margin-top: 50px;
  height: 75px;
  position: relative;
}
#entry-prev{
  float: left;
  width: 48%;
}
#entry-next{
  float: right;
  width: 48%;
}
#entry-prev-button,
#entry-next-button{
  font-family: "jubilat-n1","jubilat",sans-serif;
  font-size: 2em;
}
#entry-next-title,
#entry-prev-title{
  font-family: "proxima-nova-n1","proxima-nova",sans-serif;
  font-size: 1em;
}
#entry-prev-button{
  float: left;
  text-align: left;
}
#entry-prev-title{
  float: left;
  text-align: left;
  clear: left;
  padding-left: 75px;.0
  font-style: italic;
}
#entry-next-button{
  float: right;
  font-size: 2em;
  text-align: right;
}
#entry-next-title{
  float: right;
  text-align: right;
  clear: right;
  padding-right: 75px;
  font-style: italic;
}
#entry-prev-next:hover #entry-next-button, #entry-prev-next:hover #entry-prev-button{
  text-decoration: underline;
}
#blog-entry-content{
  min-height: 350px;
}
#blog-entry-content h2{
  color: #f07722;
}
#blog-entry-content img{
  max-width: 100%;
  margin: 25px 0px;
}

.client{
  overflow: hidden;
}
.client h1{
  color: #fff;
  left: 100%;
  text-align: center;
  line-height: 300px;
  font-weight: 200;
  position: absolute;
  width: 100%;
  z-index: 10;
  transition: .5s all;
}
.client-overlay{
  position: absolute;
  width: 100%; height: 100%;
  opacity: 0;
  transition: .5s all;
}
.client:hover .client-overlay{
  opacity: .7;
}
.client:hover h1{
    left: 0;
 }
#client:nth-child(odd){
  background: #333;
}
#client-list,
#blog-list{
  font-family: "proxima-nova-n1","proxima-nova",sans-serif;
  position: fixed;
  top: -150px; 
  width: 166px; height: 25px;
  font-size: .8em;
  font-weight: 700; line-height: 25px;
  color: #fff;
  background: #000;
  text-align: center;
  z-index: 99;
  cursor: pointer;
}
#tail{
  position: absolute;
  bottom: -40px; left: 0;
/*  border-top: 20px solid #000;
  border-bottom: 20px solid transparent;
  border-left: 84px solid transparent;
  border-right: 83px solid transparent;*/
}

#preview-section{
  height: 300px;
  position: relative;
  background: #fff;
  -webkit-box-shadow: inset 0px -36px 61px 10px rgba(255,255,255,0.95);
  -moz-box-shadow: inset 0px -36px 61px 10px rgba(255,255,255,0.95);
  box-shadow: inset 0px -36px 61px 10px rgba(255,255,255,0.95);
}
.client, .client h1{
  transition: .5s all ease;
}
/*.client:hover{
transform: rotateX(360deg);
-ms-transform: rotateX(360deg); 
-webkit-transform: rotateX(360deg); 
}
.client:hover h1{
transform: rotateX(0deg);
-ms-transform: rotateX(0deg); 
-webkit-transform: rotateX(0deg);
}*/
#preview-overlay{
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  opacity: .85;
}
#preview-section .container h1{
  position: absolute;
  bottom: 0;
  color: #fff;
  font-weight: 200;
}
#side-bar{
  position: relative;
}
.section-title{
  position: absolute;
  top: 0;
  left: 0;
  font-family: "proxima-nova-n1","proxima-nova",sans-serif;
  font-weight: 100;
}
#view-site,
#creds, 
#sticky ul{
  font-family: "jubilat-n1","jubilat",sans-serif;
  width: 100%; height: 40px;
  min-width: 125px;
  line-height: 40px;
  color: #fff;
  margin-bottom: 10px;
}
#sticky ul{
  color: #000;
}
#view-site,
#creds{
  max-width: 166px;
  width: 100%;
}
#cred-list{
  color: #000;
  font-size: .7em;
}
#cred-list li{
  /*color: #000;*/
}
#sticky{
    text-indent: 10px;
}
#view-site{
  background: #f07722;
}
#creds{
  background: #000;
  border-bottom: 1px solid #fff;
}
#first-body .container,
#second-body .container,
#third-body .container{
  padding-top: 75px;
/*  min-height: 700px;*/
  position: relative;
}
#first-body{
  background-color: #fff;
}
#second-body{
  background-color: #000;
  color: #fff !important;
}
#third-body{
  background-color: #ada6a2;
}
#first-body img,
#second-body img,
#third-body img{
  max-width: 100%;
}
#first-body p,
#second-body p,
#third-body p{
  margin: 0 0 20px 0;
  padding-bottom: 10px;
}
#first-body h3,
#second-body h3,
#third-body h3{
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
}
#first-body,
#second-body,
#third-body{
  padding: 25px 0 50px 0;
}

  .portfolio-item{
    width: 49%;
    max-height: 350px;
  }

  .grid_10 a:nth-child(3n+2) .portfolio-item{
    width: 100%;
  }
 .portfolio-item{
    min-height: 200px;
    color: #fff; 
    text-transform: uppercase;
    margin-bottom: 2%;
    position: relative;
    background-size: cover !important;
  }
  .portfolio-item-overlay,
  .portfolio-item .gradient{
    position: absolute;
    left: 0; top: 0;
    height: 100%; width: 100%;
    transition: .33s all;
  }
  .portfolio-item .gradient{
    opacity: 0;
  }
  .portfolio-item-overlay{
      background: rgba(0,0,0, .5);
  }
  .portfolio-item:hover .portfolio-item-overlay{
    opacity: 0;
  }
  .portfolio-item:hover .gradient{
    opacity: .8;
  }
  .portfolio-item:hover p span{
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0);
  }
  .portfolio-item p{
    font-size: 1.8em;
    font-family: "proxima-nova-n7","proxima-nova",sans-serif;
    text-align: center;
    font-weight: 600;
    position: absolute;
    width: 100%;
    bottom: 35%;
  }
  .portfolio-item p span{
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
  }
  #side-bar.grid_2{
    width: auto;
  }
/************************/
/*       SERVICES       */
/************************/
#services{

}
#services h2,
#services p, 
#services hr{
  margin: 15px 0;
}
.case-study-link{
  height: 50px; line-height: 50px;
  font-weight: 500;
  text-align: center;
  margin: 25px 17%;
  position: relative;
  transition: .33s all;
  border: 1px solid #000;
}
.case-study-link .case-study-title{
  color: #000;
  font-family: "jubilat-n1","jubilat",sans-serif;
}
.example-overlay{
  opacity: .7;
  background: #000;
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  z-index: -1;
}
.case-study-link:hover{
  border-radius: 55px;
}
#services-side-nav{
  position: fixed;
  text-align: left;
  font-weight: 100;
  color: #555;
  margin-left: 20px;
  font-size: 1.5em;
}
#services-side-nav li{
  margin: 25px 0;
}
#services-side-nav a li{
  transition: .5s all;
  transform-origin: 0 50%;

  -webkit-transition: .5s all;
  -webkit-transform-origin: 0 50%;

  -ms-transition: .5s all;
  -ms-transform-origin: 0 50%;
}

/************************/
/*        STORY         */
/************************/
.our-story{
  margin-bottom: 50px;
}
.our-story h4{
  font-style: italic;
  margin-bottom: 50px;
}
.letter-block{
/*  font-family: "mass-illuminated";
  font-size: 8em;
  float: left;
  line-height: 110px;*/
  font-family: "mass-illuminated";
  font-size: 6em;
  float: left;
  line-height: 60px;
  padding: 0 10px 12px 0
}
.start-story,
.end-story{
  height: 85px;
  width: 100%;
}
.start-story{
  background: url(../img/story-start.png) no-repeat center center;
  margin-bottom: 75px;
}
.end-story{
  background: url(../img/story-end.png) no-repeat center center;
  margin-top: 75px;
}
.header-image-story{
  margin-bottom: 15px;
  text-align: center;
  margin-right: auto;
}
.story-slideshow{
  /*min-height: 300px;*/
  background: #000;
  color: #fff;
}
#slideshow{
  padding-top: 50px;
  padding-bottom: 100px;
}
#slideshow img{
  width: 100%;
}

/************************/
/*       CONTACT        */
/************************/

.contact-forms iframe{
  margin-right: 2%;
  float: left;
  min-height: 1000px !important;
  overflow-x: hidden !important;
}
.contact-forms iframe html{
  width: 99% !important;
}
#talk-form,
#request-form{
  width: 48%;
}

#digital-form iframe{
  min-height:400px !important;
  max-height:400px !important;
}
/********************/
/*HOME MEDIA QUERIES*/
/********************/

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

  #section1{
    font-size: .8em;
  }

  #section2,
  #section3,
  #section4{
   /* font-size: .9em;*/
  }
}
@media screen and (max-width: 1220px){
  #address{
    float: left;
  }
  #address h1{
    font-size: 1em;
    margin: .7em;
    color: #fff;
  }
  #menu-map img{
    float: left;
    margin-right: 1%;
  }
}
@media screen and (max-width: 1010px){
  #section1,
  #section2,
  #section3,
  #section4,
  #footer{
    /*padding: 150px 87px 0 174px;*/
  }
  #section3 .middle.middle-spots{
    min-width: 0;
    padding-bottom: 50px;
  }
  #spots{
    width: 100%;
  }
  #spots > div{
    width: 100%;
    margin: 40px 0px;
  }
  #section2 p{
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    text-align: center;
  } 
}
@media screen and (max-width: 1080px){
  #address{
    width: 100%;
    margin-top: 50px;
  }
  #address h1{
    font-size: 1.5em;
    color: rgba(255, 255, 255, 0.35);
    margin: .2em;
    width: 100%;
    text-align: center;
  }
  #menu-map img{
    width: 100%;
  }
  #menu-form{
    display: none !important;
  }
}
@media screen and (max-width: 910px){
  #section2 .middle, #section3 .middle{
    width: 100%;
  }
  #spots > div .spot{
   /* margin-left: 0; margin-right: 0;*/
  }
  .middle{
    width: 100%;
  }

  #section1{
    font-size: .5em;
  }

  #section1 p,
  #section2 p,
  #section3 p,
  #section4 p{
    width: 90%;
    margin: auto;
    margin-bottom: 55px;
    /*font-size: .8em;*/
  }
}


@media screen and (max-width: 730px){
  #menu-contact-form{
    display: none !important;
  }
}
@media screen and (max-width: 510px){
/*  #menu{
    display: none;
  }*/
  #vert-logo{
    display: none;
  }
  #down-arrow{
    display: none;
  }
  #section1,
  #section2,
  #section3,
  #section4,
  #footer{
    /*padding: 100px 0 0 87px;*/
  }
  #section2 h1,
  #section3 h1,
  #section4 h1{
    font-size: 1.6em;
    margin-left: 10px;margin-right: 10px;
  }
  #section2 p,
  #section3 p,
  #section4 p{
    /*margin-left: 10px;margin-right: 10px;*/
  }
  #spots > div .spot:hover{
    -webkit-transform: scale(.8, .8);
  /*  -webkit-animation: pop-in .3s ease-in-out;*/
  }
}


/************************/
/*INTERIOR MEDIA QUERIES*/
/************************/
@media screen and (max-width: 1340px){
  .int-body blockquote{
    /*margin-left: 110px;*/
  }
}
@media screen and (max-width: 1280px){
  #preview-section .container,
  #first-body .container,
  #second-body .container,
  #third-body .container{
    margin-left: 70px;
  }

@media screen and (max-width: 1000px){
  .author{
    /*display: none;*/
  }
  #services-side-nav{
    display: none;
  }
  #author-int{
    display: none;
  }
  #blog-entry-content{
    width: 100%;
  }
}

@media screen and (max-width: 925px){ 
  .author img, .author p, #client-list, #blog-list{
    width: 100px;
    font-size: .5em;
  }
  #tail{
    width: 100px;
    bottom: -24px;
  }
  .int-body h1{
    width: 90%;
    margin-left: 5%;
  }
  .int-story .grid_2{
    width: 5%;
  }
  .int-story .grid_8{
    width: 86%;
  }
  #sticky{
    display: none;
  }
  #first-body .container .grid_10,
  #second-body .container .grid_10,
  #third-body .container .grid_10{
    width:100%;
  }
  .about-member{
    width: 80%;
    margin-left: 10% !important;
  }
}
@media screen and (max-width: 760px){ 
  .int-body blockquote p {
  margin: 20px 0% 20px 0%;
  width: 100%;
  }
  .int-body blockquote{
    font-size: .8em;
    background: #eee;
    border-radius: 5px;
  }
}
@media screen and (max-width: 700px){ 
  #preview-section .container, #first-body .container, #second-body .container, #third-body .container{
    margin-left: auto;
  }
  .first-entry{
   /* margin-top: 100px;*/
  }
  .first-entry h1{
    font-size: 2em;
  }
  #entry-prev-button,
  #entry-next-button{
    font-size: 1em;
    line-height: 40px;
  }
  #section1, #section2, #section3, #section4, #footer{
    margin-left: 0;
    width: 100%;
  }
  #menu{
    display: none;
  }
  .case-study-link{
    margin: 15px 0;
  }
  #talk-form, #request-form{
    width: 100%;
  }
  .int-body,
  .team-member,
  #clientCatalog,
  #blogCatalog{
    margin-left: 0 !important;
    width: 100% !important;
  }
  .team-member h1,
  .int-body h1{
    font-size: 2em;
  }
  .int-body .grid_2{
    display: none;
  }
  .int-body .grid_8{
    width: 100%;
  }
  #mobile-menu-header{
    display: block;
    z-index: 9999;
    cursor: pointer;
  }
  #mobile-menu-wordmark{
    position: absolute;
    left: 100%;
    height: 85%;
    top: 7.5%;
    transition: .2s all;
  }
  .first-entry:hover,
  .entry:hover{
    background: #fff;
  }
  .first-entry:hover .entry-overlay,
  .entry:hover .entry-overlay{
    background: #fff;
  }
  #footer-logo{
    max-width: 90%;
  }
}

@media screen and (max-width: 650px) {
  .portfolio-item{
    width: 100%;
  }

  #digital-form{
    width:100%;  }
}

@media screen and (max-width: 510px){ 
  .author,
  #entry-prev-title,
  #entry-next-title{
    display: none;
  }
  .int-body .container{
   /*margin-right: 0;*/
  }
  #spot1,
  #spot2,
  #spot3,
  #spot4{
    /*margin-left: 25% !important;*/
  }
}