/****************************
-- General --
****************************/
#support h4 {
  color: #4d4d4d;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 400;
}

/****************************
-- Support Swimlane --
****************************/
.support-swimlane .swimlane {
  padding: 20px 0;
}

.support-swimlane .copy + .img {
  display: inline-block;
}

.support-swimlane .copy {
  padding-bottom: 20px;
}

.support-swimlane .copy h2 {
  margin-bottom: 15px;
}

.support-swimlane .copy .sku {
  color: #8a8a8a;
  margin-top: 15px;
}

.support-swimlane .img {
  border-top: 1px solid #e5e5e5;
  margin: 0;
  padding-top: 20px;
}

.support-swimlane .img .limiter {
  margin: 0 auto 20px;
  max-width: 176px;
}

.support-swimlane .img h4 {
  margin-bottom: 15px;
}

.support-swimlane .links li {
  margin-top: 10px;
}

.support-swimlane .links li:first-child {
  margin-top: 0;
}

.support-swimlane .links a {
  font-size: 11px;
  font-size: 1.1rem;
  font-weight: 700;
}

/* Load Animation */
.on-load-anim #support .support-swimlane .copy,
.on-load-anim #support .support-swimlane .img {
  opacity: 0;
}

header.loaded + #support .support-swimlane .copy.animate {
  -webkit-animation: fadeInFromLeft 300ms ease 1200ms forwards; /* 500ms from header delay + 700 from header animation*/
  animation: fadeInFromLeft 300ms ease 1200ms forwards;
}

header.loaded + #support .support-swimlane .img.animate {
  -webkit-animation: fadeInFromRight 300ms ease 1200ms forwards;
  animation: fadeInFromRight 300ms ease 1200ms forwards;
}
/* /Load Animation */



/***************************
----- TOP -------------
****************************/



.top-links{
  margin-top: 25px;
}

.top-links a{
  display: inline-block;
  padding: 4px 17px;
  color: #959595;
  font-weight: bold;
  font-size: 13px;
}
.top-links a:first-child{
  border-right: 1px solid #EDEDED;
}

.top-white .main-title .top h1{
  color: #4d4d4d;
}


#support .videos .filters{
  width: 60%;
  display: block;
  margin: auto;
  padding:10px 0;
}

#support .videos .filters .grid{
  margin: 0;
  padding: 13px 12px;
  position: relative;
  top: -5px;
}

#support .videos h4{
  display: inline-block;
}


.highlight-link h2{
    font-size: 22px;
    padding: 20px 0 0;
    color: #666666;
}

/****************************
-- Featured --
****************************/
/*---------------------
FAQs
---------------------*/
#support .featured .faqs {
  padding: 20px 0;
  width: 100%;
}

#support .featured .faqs .loading-img {
  margin-top: 25px;
}

#support .featured .faqs h5 {
  margin-bottom: 0.5em;
}

#support .featured .faqs .sep {
  margin-top: 1.5em;
  padding-top: 1.5em;
}

#support .featured .faqs .sep:first-child {
  padding-top: 0;
}

#support .featured .faqs .sep:first-child:after {
  width: 0;
}

#support .featured .faqs .more {
  display: inline-block;
  font-size: 11px;
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 15px;
}

#support .featured .faqs .no-results {
  margin-top: 1.5rem;
}

/*---------------------
Videos
---------------------*/
#support .featured .videos {
  padding: 20px 0 40px;
  width: 100%;
}

#support .featured .videos h4 {
  margin-bottom: 15px;
  padding: 0 15px;
}

#support .featured .videos .gallery {
  margin: 0 -15px;
}

#support .featured .videos .gallery .list {
  margin-bottom: 20px;
}

#support .featured .videos .gallery .list .bx-wrapper {
  float: right;
  padding: 0 1px; /* For each side's border */
}
#support .featured .videos .gallery .list.one .bx-wrapper {
  float: none;
  padding: 0 1px; /* For each side's border */
}

#support .featured .videos .gallery .list .bx-wrapper:before {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  bottom: 11px;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

#support .featured .videos .gallery .list .bx-wrapper:after {
  bottom: 12px;
  border-radius: 0 8px 8px 0;
  content: '';
  position: absolute;
  right: 1px;
  top: 1px;
  width: 70px;
  z-index: 1;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

#support .featured .videos .gallery .list .bx-wrapper .bx-viewport {
  padding-bottom: 12px; /* for arrow, overlapping background border: 1px border + 11px arrow */
}

#support .featured .videos .list li {
  height: 106px; /* 81px height + 12+12px padding + 1px border */
  text-align: center;
}

#support .featured .videos .list li .vid {
  display: block;
  height: 100%;
  padding: 13px 0 12px; /* top: 1px border + 12px padding --- bottom: 12px padding + no border */
}

#support .featured .videos .list .vid:before,
#support .featured .videos .list .vid:after {
  border-style: solid;
  border-width: 0;
  content: '';
  left: 50%;
  position: absolute;
  top: 100%;
}

#support .featured .videos .list .vid:before {
  border-color: #fff transparent transparent transparent;
  margin-left: -11px;
  z-index: 2;
  transition: border 300ms ease;
}

#support .featured .videos .list .active:before {
  border-width: 11px 11px 0 11px;
}

#support .featured .videos .list .vid:after {
  border-color: #e5e5e5 transparent transparent transparent;
  margin-left: -13px;
  z-index: 1;
  transition: border 300ms ease;
}

#support .featured .videos .list .active:after {
  border-width: 13px 13px 0 13px;
}

#support .featured .videos .list .vid .vertical-wrap {
  border-right: 1px solid #e5e5e5;
  padding: 0 7px;
  position: static;
}

#support .featured .videos .list .vid h5 {
  color: #4d4d4d;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.25;
}

#support .featured .videos .list .active h5 {
  color: #06a94e;
}

#support .featured .videos .list .vid p {
  color: #969696;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 0.25em;
}

/* Pager */
#support .featured .videos .list .bx-controls-direction {
  position: absolute;
  right: 0;
  bottom: 11px;
  width: 100%;
  height: 0;
}

#support .featured .videos .list .bx-viewport{
  width: 96% !important;
}

#support .featured .videos .list .bx-wrapper .bx-controls-direction a {
  height: 107px;
  margin: 0;
  position: absolute;
  display: block;
  width: 29px;
  top: -107px;
  background: #FFF;
}

#support .featured .videos .list .bx-wrapper .bx-controls-direction .bx-prev{
  left: 0;
  border: 1px solid #e5e5e5;
  border-bottom-left-radius:8px;
  border-top-left-radius:8px;
  -moz-border-bottom-left-radius:8px;
  -moz-border-top-left-radius:8px;
  -webkit-border-bottom-left-radius:8px;
  -webkit-border-top-left-radius:8px;

}
#support .featured .videos .list .bx-wrapper .bx-controls-direction .bx-next{
  right: 0;
  border: 1px solid #e5e5e5;
  border-bottom-right-radius:8px;
  border-top-right-radius:8px;
  -moz-border-bottom-right-radius:8px;
  -moz-border-top-right-radius:8px;
  -webkit-border-bottom-right-radius:8px;
  -webkit-border-top-right-radius:8px;
}

#support .featured .videos .list .bx-wrapper .bx-controls-direction a:after {
  color: #06a94e;
  font-family: inherit;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 700;
  height: 20px;
  left: 4px;
  line-height: 20px;
  opacity: 0.5;
  position: absolute;
  text-align: center;
  text-indent: 0;
  top: 40px;
  width: 15px;
  transition: opacity 200ms ease;
}

#support .featured .videos .list .bx-wrapper .bx-controls-direction a:hover:after {
  opacity: 1;
}

#support .featured .videos .list .bx-wrapper .bx-prev:after {
  content: '←';
}

#support .featured .videos .list .bx-wrapper .bx-next:after {
  content: '→';
}

#support .featured .videos .list .bx-wrapper .bx-controls-direction .disabled {
  display: none;
}

#support .featured .videos .list .arlo-q-support-video-slider li {
  width: 180px !important;
}

/****************************
-- Article List --
****************************/
#support .article-list {
  padding: 25px 0;
}

#support .article-list .header {
  margin: 0 auto;
  max-width: 560px;
}

#support .article-list .header h4 {
  margin-bottom: 15px;
}

#support .article-list .header p {
  margin-bottom: 1.5em;
}

/*---------------------
Filters
---------------------*/
#support .article-list .filters {
  margin-bottom: 30px;
}

#support .article-list .filters .grid, #support .videos .filters .grid {
  display: none;
}

#support .article-list .filters li {
  margin-top: 15px;
}

#support .article-list .filters .select-wrapper {
  margin: 0 auto;
  max-width: 320px;
}

#support .article-list .filters :-moz-any(.select-wrapper):before {
  background: #f6f6f6;
}

/*---------------------
Articles
---------------------*/
#support .article-list .articles .loading-img {
  margin-bottom: 30px;
}

#support .article-list .articles .no-results {
  margin: 30px 0 10px;
  text-align: center;
}

#support .article-list .articles .col {
  margin-bottom: 22px;
}

/****************************
-- Media Queries --
****************************/
@media screen and (min-width: 35em) {
  /*---------------------
  Article List
  ---------------------*/
  /* Articles */
  #support .article-list .articles {
    margin: 0 -11px;
  }

  #support .article-list .articles .col {
    padding: 0 11px;
    width: 50%;
  }

  #support .article-list .articles .wrap {
    min-height: 171px;
  }
}

@media screen and (min-width: 48em) {
  /*---------------------
  Support Swimlane
  ---------------------*/
  .support-swimlane .swimlane {
    padding: 40px 0;
  }

  .support-swimlane .copy {
    padding-bottom: 1.3889%;
  }

  .support-swimlane .img {
    border-left: 1px solid #e5e5e5;
    border-top: 0;
    padding-top: 1.3889%;
    vertical-align: bottom;
  }

  .support-swimlane .img .limiter {
    float: left;
    margin: 0 10px 0 0;
    width: 50%;
  }

  .support-swimlane .img .limiter + .links {
    overflow: hidden;
  }

  /*---------------------
  Featured
  ---------------------*/
  #support .featured {
/*    background-color: #fafafa;
    border-top: 1px solid #e5e5e5;*/
  }

  #support .featured .grid {
    margin: 0 -15px;
    padding: 50px 0;
  }

  /* FAQs */
  #support .featured .faqs {
    padding: 0 15px;
    width: 50%;
  }

  /* Videos */
  #support .featured .videos {
    padding: 0 15px;
    width: 50%;
  }

  #support .featured .videos .gallery {
    margin: 0;
  }

  #support .featured .videos h4 {
    padding: 0;
  }

  /*---------------------
  Article List
  ---------------------*/
  #support .article-list {
    border-top: 1px solid #e5e5e5;
    padding-top: 40px;
  }

  #support .article-list .articles .no-results {
    margin: 50px 0 30px;
  }

  #support .article-list .header p {
    margin-bottom: 1.25em;
  }

  /* Filters */
  #support .article-list .filters .grid, #support .videos .filters .grid{
    display: block;
  }

  #support .article-list .filters .select-wrapper, #support .videos .select-wrapper{
    display: none;
  }


  /* Articles */
  #support .article-list .articles .col {
    width: 33.33%;
  }

  #support .article-list .articles .wrap {
    min-height: 211px;
  }

  #support .videos .filters{
    padding: 0;
    width: auto;
    display: inline-block;
  }

}

@media screen and (min-width: 64em) {

  /*---------------------
  Support Swimlane
  ---------------------*/
  .support-swimlane .grid {
    margin: 0 -65px;
    padding: 20px 0 65px;
  }

  .support-swimlane .grid .copy {
    padding: 0 65px;
    width: 57.2%;
  }

  .support-swimlane .grid .img {
    padding: 0 65px;
    width: 42.8%;
  }

  .support-swimlane .img .limiter {
    margin-right: 15px;
  }

  .support-swimlane .img .limiter img {
    right: auto;
  }

  .support-swimlane .links a {
    font-size: 13px;
    font-size: 1.3rem;
  }

  .support-swimlane .links li {
    margin-top: 13px;
  }

  /*---------------------
  Featured
  ---------------------*/
  #support h4 {
    font-size: 28px;
    font-size: 2.8rem;
  }

  #support .featured .grid {
    margin: 0 -30px;
    padding: 60px 0 100px;
  }

  /* FAQs */
  #support .featured .faqs {
    padding: 0 30px;
    width: 39.83%;
  }

  #support .featured .faqs h5 {
    font-size: 18px;
    font-size: 1.8rem;
    margin: 0;
  }

  #support .featured .faqs p {
    font-size: 16px;
    font-size: 1.6rem;
  }

  #support .featured .faqs .more {
    font-size: 13px;
    font-size: 1.3rem;
    margin-top: 25px;
  }

  /* Videos */
  #support .featured .videos {
    padding: 0 30px;
    width: 60.17%;
  }

  /*---------------------
  Article List
  ---------------------*/
  #support .article-list {
    padding-top: 50px;
  }

  /* Articles */
  #support .article-list .articles .col {
    width: 25%;
  }
}