/*  
*
* Zoom Digital
* Version: 1.1.0
* build: 03/2020
*
* CSS: mmrobinson
*
*/
/* ====== SASS vars (in SCSS format) ====== */
/* colors */
.primary {
  color: #09f; }

.bg-primary {
  background-color: #09f; }

.zoom-blue-bg {
  background-color: #09f; }

/* ====== Basic Typography ====== */
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, ul, li, em, strong, a {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif; }

body {
  font-weight: 300;
  background-color: #fff;
  color: #555; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  text-transform: uppercase; }

p, ul {
  font-weight: 300;
  line-height: 1.25em; }

.header,
#hero h1 {
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1.5rem; }

.header {
  color: #09f; }

#hero h1 {
  color: #fff; }

.subhead {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.125rem; }

/* xs  */
/* sm */
/* md */
@media (min-width: 768px) {
  .header,
  #hero h1 {
    font-size: 2rem;
    line-height: 1.75rem; }
  .subhead {
    font-size: 1.125rem;
    line-height: 1.125rem; } }

/* lg */
@media (min-width: 992px) {
  .header,
  #hero h1 {
    font-size: 2.75rem;
    line-height: 2.5rem; }
  .subhead {
    font-size: 1.25rem;
    line-height: 1.25rem; } }

/* xl */
@media (min-width: 1200px) {
  #hero h1 {
    font-size: 3rem;
    line-height: 2.75rem; }
  .subhead {
    font-size: 1.375rem;
    line-height: 1.375rem; } }

/* ====== Navigation ====== */
header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%; }

.navbar .navbar-nav, .navbar-brand, .nav-item, .nav-link {
  color: white;
  background-color: transparent; }

.navbar-toggler {
  width: 28px;
  font-size: 8px;
  line-height: 8px;
  padding: 0;
  border: none; }

.navbar-toggler .icon-bar {
  display: inline-block;
  width: 100%;
  height: 3px;
  background-color: #fff;
  margin: 0; }

.header-contact {
  margin-right: 1.5rem;
  padding: .375rem 1rem;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.125rem;
  color: #fff;
  background-color: transparent;
  border: #fff solid 2px;
  text-transform: uppercase; }

.navbar-nav {
  text-align: right; }

a.nav-link, a.nav-link:link {
  font-weight: 300;
  font-size: .875rem;
  text-transform: uppercase;
  padding: .25rem 0; }

/* xs */
@media (max-width: 575px) {
  .navbar-brand {
    width: 80%;
    max-width: 360px; }
  .navbar-toggler {
    font-size: 6px;
    line-height: 6px; }
  .navbar-toggler .icon-bar {
    height: 2px; } }

/* sm 
@media (min-width: 576px) {}
/* md */
@media (min-width: 768px) {
  .navbar-nav {
    flex-direction: row; }
  .nav-item {
    padding: 0 1rem; } }

/* lg */
@media (min-width: 992px) {
  .navbar-brand {
    width: 340px; } }

/* xl */
@media (min-width: 1200px) {
  .navbar-brand {
    width: 380px; } }

/* ====== Footer ====== */
footer {
  background-color: #09f;
  color: #fff;
  padding: 2rem 0; }

footer .logo {
  margin-bottom: 1rem; }

.icon {
  color: transparent;
  font-size: 1em;
  text-indent: 101%;
  background-size: 1000px 1000px;
  overflow: hidden; }

.icon:hover, .icon:focus {
  color: transparent; }

.contactIcons {
  display: block;
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: 0; }

.contactIcons li {
  display: inline-block;
  padding: 0;
  margin: 0 1rem;
  height: 2rem;
  width: 2rem; }

.contactIcons a {
  display: inline-block;
  height: 2rem;
  width: 2rem;
  background-size: 100% auto; }

.contactUs {
  margin-top: 1rem;
  font-weight: 900; }

.phone, .phone:link {
  color: #fff;
  transition: all .5s;
  font-weight: 700; }

.phone:hover, .phone:focus {
  text-decoration: underline; }

address, address p {
  margin-bottom: 0; }

.addressArea {
  display: inline;
  text-align: center; }

.copyright {
  margin-top: 2rem;
  font-size: .75em; }

/* icon ids for SVGs */
.fb-icon {
  background-image: url("../img/svg/fbicon-white.svg"); }

.tw-icon {
  background-image: url("../img/svg/twittericon-white.svg"); }

.ph-icon {
  background-image: url("../img/svg/phoneicon-white.svg"); }

.em-icon {
  background-image: url("../img/svg/mailicon2-white.svg"); }

/* icon ids for IE */
.IE .fb-icon {
  background-image: url("../img/svg/fbicon-white.png"); }

.IE .tw-icon {
  background-image: url("../img/svg/twittericon-white.png"); }

.IE .ph-icon {
  background-image: url("../img/svg/phoneicon-white.png"); }

.IE .em-icon {
  background-image: url("../img/svg/mailicon2-white.png"); }

/* md */
@media (min-width: 768px) {
  .contactUs {
    margin-top: 0; }
  .addressArea {
    text-align: left; } }

/* ====== Global Styles ====== */
#mainContent {
  margin: 0;
  width: 100%;
  padding: 1rem 0 0 0;
  background-color: #fff; }

#mainContent .row {
  padding-top: .5rem;
  padding-bottom: .5rem; }

.responsive {
  width: 100%;
  height: auto; }

.fullwidth {
  width: 100%; }

.featureImage {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin: 1rem 0; }

.featureImage img {
  position: block;
  width: 100%;
  height: auto; }

#feature-dealer {
  margin-bottom: 0; }

.button-lg, .button-lg:link, .button-lg:not([href]) {
  display: inline-block;
  color: #fff;
  background-color: #09f;
  padding: .875rem 2rem;
  transition: all .5s;
  cursor: pointer; }

.button-lg:hover, .button-lg:focus {
  color: #fff;
  text-decoration: none;
  background-color: #06c; }

.button-lg p {
  color: #fff;
  margin: 0;
  padding: 0;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.5rem;
  text-transform: uppercase; }

.button-lg em {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  line-height: .75rem;
  font-style: normal; }

button:focus {
  outline: none; }

/* featureImage ids */
/* xs 
@media (max-width: 575px) {}
/* sm 
@media (min-width: 576px) {}
/* md */
@media (min-width: 768px) {
  #mainContent {
    padding: 2rem 0 0 0; }
  .featureImage img {
    width: 100%;
    height: auto;
    margin-left: 0; }
  .button-lg, .button-lg:link {
    padding: .5rem 1rem; }
  .button-lg p {
    font-size: 1.5rem;
    line-height: 1.5rem; }
  .button-lg em {
    font-size: 1rem;
    line-height: .75rem; } }

/* lg */
@media (min-width: 992px) {
  #mainContent {
    padding: 4rem 0 0 0; }
  #mainContent .row {
    padding-top: 1rem;
    padding-bottom: 1rem; }
  .featureImage {
    height: 360px; }
  .featureImage img {
    width: 100%;
    height: auto; }
  .button-lg p {
    font-size: 2rem;
    line-height: 2rem; }
  .button-lg em {
    font-size: 1.25rem;
    line-height: 1rem; } }

/* xl */
@media (min-width: 1200px) {
  .featureImage {
    height: 480px; } }

/* ====== Hero Video ====== */
#videoContainer {
  position: fixed;
  z-index: -1;
  top: 5rem;
  left: 0;
  width: 100%;
  background-color: #000; }

#hero {
  margin-top: 5rem;
  padding-top: 6.5rem;
  padding-bottom: 5.5rem;
  color: #fff; }

#hero h1, #hero p {
  text-shadow: 4px 4px 8px #000; }

#hero p {
  font-weight: 400; }

/* xs */
@media (max-width: 575px) {
  #hero {
    padding-top: 5rem;
    padding-bottom: 5rem; }
  #videoContainer {
    top: 4.25rem;
    height: 300px; } }

/* sm 
@media (min-width: 576px) {}
/* md */
@media (min-width: 768px) {
  .partnerLogo {
    height: 72px; }
  #hero {
    padding-top: 6rem;
    padding-bottom: 6rem; } }

/* lg */
@media (min-width: 992px) {
  .partnerLogo {
    height: 100px; }
  #hero {
    padding-top: 8rem;
    padding-bottom: 8rem; }
  #hero p {
    font-size: 1.125rem; } }

/* xl */
@media (min-width: 1200px) {
  #hero {
    padding-top: 11rem;
    padding-bottom: 11rem; } }

/* ====== Services Section ====== */
.partnerLogo {
  height: auto;
  width: 100%; }

#services ul {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin-left: 0; }

.largeIcon {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 1rem 0;
  background-color: #09f;
  border-radius: 50%;
  background-size: 100% auto;
  background-position: center center; }

/* icon ids for SVGs */
#seo {
  background-image: url("../img/svg/searchIcon-white.svg"); }

#ppc {
  background-image: url("../img/svg/ppcIcon-white.svg"); }

#social {
  background-image: url("../img/svg/socialIcon-white.svg"); }

#web {
  background-image: url("../img/svg/devIcon-white.svg"); }

#video {
  background-image: url("../img/svg/videoIcon-white.png"); }

#email {
  background-image: url("../img/svg/mailIcon-white.svg"); }

/* icon ids for IE */
.IE #seo {
  background-image: url("../img/svg/searchIcon-white.png"); }

.IE #ppc {
  background-image: url("../img/svg/ppcIcon-white.png"); }

.IE #social {
  background-image: url("../img/svg/socialIcon-white.png"); }

.IE #web {
  background-image: url("../img/svg/devIcon-white.png"); }

.IE #video {
  background-image: url("../img/svg/videoIcon-white.png"); }

.IE #email {
  background-image: url("../img/svg/mailIcon-white.png"); }

/* xs */
@media (max-width: 575px) {
  #services {
    text-align: center; } }

/* sm
@media (min-width: 576px) {}
*/
/* md */
@media (min-width: 768px) {
  .partnerLogo {
    height: 72px;
    width: auto; }
  .largeIcon {
    width: 120px;
    height: 120px; } }

/* lg */
@media (min-width: 992px) {
  .partnerLogo {
    height: 100px; }
  .largeIcon {
    width: 140px;
    height: 140px; } }

/* xl */
@media (min-width: 1200px) {
  .partnerLogo {
    height: 100px; }
  .largeIcon {
    width: 160px;
    height: 160px; } }

/* ====== Work Section ====== */
.thumbnail {
  position: relative;
  width: 100%;
  height: 130px;
  overflow: hidden;
  cursor: pointer; }

.thumbnail-overlay {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #09f;
  opacity: 0;
  transition: all .5s; }

.active .thumbnail-overlay {
  opacity: .5; }

.thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: all .5s; }

.active .thumbnail-image {
  width: 130%;
  margin: -15% 0 0 -15%; }

.thumbnail-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/svg/videoIcon-white.svg");
  background-size: 100px 100px;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0; }

.active .thumbnail-icon {
  opacity: 1; }

.thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #999; }

@media (min-width: 360px) {
  .thumbnail {
    height: 155px; } }

@media (min-width: 410px) {
  .thumbnail {
    height: 175px; } }

/* sm */
@media (min-width: 576px) {
  .thumbnail {
    height: 150px; } }

/* md */
@media (min-width: 768px) {
  .thumbnail {
    height: 210px; } }

/* lg */
@media (min-width: 992px) {
  .thumbnail {
    height: 210px; } }

/* xl */
@media (min-width: 1200px) {
  .thumbnail {
    height: 255px; } }

/* ====== Account Section ====== */
#account ul {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin-left: 0; }

#account li {
  font-size: 1.25rem;
  font-weight: 700;
  vertical-align: middle;
  text-transform: uppercase; }

.account-list-icon {
  width: 40px;
  height: auto;
  margin-right: 1rem; }

/* xs */
@media (max-width: 575px) {
  #account ul {
    margin-top: 1rem; }
  #account li {
    font-size: 1rem; } }

/* sm 
@media (min-width: 576px) {}
/* md 
@media (min-width: 768px) {}
/* lg */
@media (min-width: 992px) {
  #account li {
    font-size: 1.75rem; }
  .account-list-icon {
    width: 50px; } }

/* xl */
@media (min-width: 1200px) {
  #account li {
    font-size: 2rem; }
  .account-list-icon {
    width: 60px; } }

/* ====== Modals ====== */
.modal {
  background-color: rgba(0, 0, 0, 0.65); }

#work .modal-dialog {
  margin-top: 4rem;
  width: 90%;
  max-width: 1400px;
  text-align: center;
  animation-duration: 1s;
  z-index: 999999; }

#work .modal-content {
  background-color: transparent;
  width: 100%;
  border: none;
  border-radius: 0; }

#work .modal-body {
  padding: 0;
  width: 100%; }

#work .modal-footer {
  border: none;
  padding: 0;
  height: 0; }

#work .modal-header {
  border: 0;
  padding: 0 0 .5rem 0; }

#work .modal-header .close {
  color: #ccc; }

#work .modal-content iframe {
  width: 100%; }

#formModal .modal-dialog {
  margin-top: 3rem;
  width: 50%;
  max-width: 1000px;
  animation-name: animatetop;
  animation-duration: 1s;
  z-index: 999999; }

#formModal .modal-content {
  width: 100%;
  border: none; }

#formModal .modal-body {
  padding: 1rem 2rem;
  width: 100%; }

#formModal .modal-footer {
  border: none;
  padding: 0; }

#formModal .modal-header {
  background-color: #09f; }

#formModal h2, #formModal h3 {
  color: #fff;
  font-weight: 900; }

#formModal .modal-header .close {
  color: #fff; }

.formtitles {
  font-weight: 700;
  font-size: .75rem;
  color: #555; }

#formModal input, #formModal textarea, #comments {
  color: #555;
  font-weight: 300; }

#formModal #submit {
  display: inline-block;
  padding: .5rem 1rem;
  color: #fff;
  background-color: #09f;
  border-radius: .25rem; }

#userid {
  display: none; }

/* #formMessages */
.formCopy {
  padding-bottom: 18px; }

#formMessages {
  display: inline-block;
  width: 100%;
  word-wrap: break-word; }

.formError {
  padding: 12px;
  background-color: #fcc;
  color: #f00; }

.formSuccess {
  padding: 12px;
  background-color: #cfc;
  color: #363; }

.formProcessing {
  height: 100px;
  width: 100%;
  background: transparent url("../img/loader.gif") 0 0 no-repeat; }

/* add animation effects */
@-webkit-keyframes animatetop {
  from {
    top: -300px;
    right: 0;
    opacity: 0; }
  to {
    top: 0;
    right: 0;
    opacity: 1; } }

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0; }
  to {
    top: 0;
    opacity: 1; } }

@keyframes animateright {
  from {
    margin-left: 180px;
    opacity: 0; }
  to {
    margin-left: -180px;
    opacity: 1; } }

/* xs */
@media (max-width: 575px) {
  #work .modal-dialog {
    width: 95%;
    top: 25%; } }

/* ====== Standard Bootstrap Media Queries ====== */
/* xs 
@media (max-width: 575px) {}
/* sm 
@media (min-width: 576px) {}
/* md 
@media (min-width: 768px) {}
/* lg 
@media (min-width: 992px) {}
/* xl
@media (min-width: 1200px) {}
 */