@charset "UTF-8";

body{
  font-size:14px !important;
}

.heroImage h1, .footerHero .theChange{
  font-size: 2.5em;
  }

.heroImage h1 {
  right: 0% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important; /* Yep! */
  -webkit-transform: translate(-50%, -50%) !important; /* Yep! */
  -moz-transform: translate(-50%, -50%) !important; /* Yep! */
  -ms-transform: translate(-50%, -50%) !important; /* Yep! */
  -o-transform: translate(-50%, -50%) !important; /* Yep! */
  }
  
  .persona .heroImage .theChange {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important; /* Yep! */
    -webkit-transform: translate(-50%, -50%) !important; /* Yep! */
    -moz-transform: translate(-50%, -50%) !important; /* Yep! */
    -ms-transform: translate(-50%, -50%) !important; /* Yep! */
    -o-transform: translate(-50%, -50%) !important; /* Yep! */
    width: 90% !important;
    }

.heroImage h1, .footerHero .theChange {
  width: 60%;
  }

.smallCage, .smallCage2{
  width:90%;
}

#worldMap {display: none;}

.cartButton, .wtbtop img {
  display: none
}
.wtbtop p {
  width: 100%
}
#ContentPlaceHolderDefault_PageWrapper_Content_Button1 {
  margin-bottom: 10px
}
.dl-menu, .dl-menuwrapper {
  display: block;
  z-index: 1000000
}
#navBar, header {
  display: none
}
#mobileLogo {
  width: 80px;
  padding: 5px 0 0 10px;
  float: left
}
.mobileIcons {
  width: 35px;
  margin-right: 5px
}
#shell {
  display: block;
  position: absolute;
  right: 50px;
  top: 13px
}
#thumbCircle {
  transition: none;
  padding: none
}
#thumbCircle:hover {
  padding: 5px
}
#thumbCircle img:hover {
  transition: none;
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: none;
  width: 100%;
  position: relative
}
.thumbnails li {
  width: 25.5%;
  vertical-align: top;
  margin: 1% 2.8%
}
#rightCol, .footContainer, .thumbnails li img {
  width: 100%
}
#thumbCircle {
  width: 100%;
  margin: 0 auto
}
footer .theChange {
  padding-left: 5%;
  font-size: 16px
}
.collapseSlider, .slider {
  display: none
}
.sliderExpanded .collapseSlider {
  display: block
}
.sliderExpanded .expandSlider {
  display: none
}
.expandSlider span {
  display: inline-block
}
.twitter-timeline {
  display: none!important
}
.column {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.3)
}
.column ul {
  margin-left: 5%
}
#leftCol {
  display: none
}
#rightCol {
  margin-bottom: 10px
}
#rightCol ul {
  margin: 5px 0 0 30px
}
#rightCol ul img {
  width: 35px
}
#rightCol li {
  margin-right: 5px
}
#floatRight {
  width: 67%;
  float: right;
  margin-top: 8px
}
#leftColMobile {
  width: 95%;
  display: block;
  border: none;
  margin: 0 auto;
  float: none
}
#icons li, #linky li {
  display: inline
}
.midCol {
  width: 100%
}
#fgLogo {
  float: left;
  width: 100px;
  margin: 0!important
}
#linky {
  width: 100%;
  margin: 0;
  padding: 0!important
}
#linky li {
  margin: 0 3px
}
#icons {
  width: 100%;
  margin-top: 12px
}
#icons li:nth-child(1) img {
  width: 15%
}
#icons li:nth-child(2) img {
  width: 14%
}
#icons li:nth-child(3) img {
  width: 39%
}
.slickSlide h1 {
  font-size: 1em;
  margin-bottom: 5px
}
.slickSlide p {
  font-size: .7em;
  display: none
}
.slideText {
  padding: 15px;
  line-height: 1;
  width: 93%;
  bottom: 27%;
  right: 0;
  border-radius: 0
}
.slideButtons {
  margin: 0 auto;
  width: 100%;
  display: block;
  text-align: center
}
.slick-next, .slick-prev {
  top: 44%!important
}
.slideText h1 {
  width: 102%;
  font-size: 1.6em;
  text-align: center;
  font-weight: 500!important
}
.blueBtn, .greyBtn {
  font-size: .9em;
  padding: 4px 8px
}
.slick-dots li button:before {
  font-size: 34px!important
}
#contacttop p, .captiontitleprod h2 {
  font-size: 1em!important
}
.slick-dots {
  margin: 4px 0!important
}
.contactleft {
  width: 100%;
  border-bottom: solid 2px #32b6e2
}
.contactright {
  width: 100%;
  border: none
}
#contactform {
  width: 100%
}
#docliblist li {
  vertical-align: top;
  width: 49%
}
.togglerACC img {
  width: 20%;
  margin-right: 10px
}
.togp {
  margin: 5px 0 0
}
.sliderACC {
  margin: 0;
  padding: 5px 0
}
.sliderACC ul {
  margin-left: 0;
  padding-left: 25px
}
.garages li {
  width: 48%;
  margin: 0 1%
}
.pixieprod, div.captionprod {
  width: 100%
}
.captionprod img {
  width: 100%;
  height: auto
}
.pixieprod div.captiontitleprod {
  width: 48%
}
.trail-textprod {
  display: none!important
}
.productsImg {
  width: 100%!important
}
.next2Slider {
  margin: 10px 0 0;
  width: 100%
}
#heroText {
  display: none
}
#heroImg {
  height: 130px
}

.pathThumbnails li .mobileImg{
  display:block;
}

.pathText, .desktopImg{
  display:none;
  }

.pathThumbnails .theChange {
  width:90%;
  margin:0 auto;
  font-size:2em;
}

.pathThumbnails li{
  width:100%;
}

.pathThumbnails li a{
  font-size:1.5em;
  font-weight:300;
  }

.mainDescription .upperContent{
  width:100%;
  }

.lowerContent{
  margin:0px;
}

.lowerContent li{
  width:100%;
}

#lowerLink{
  width:90%;
  padding:15px 15px;
}

.lower li{
  width:49%;
  min-height:146px;
  }

.heroImage{
  display:block;;
  overflow:hidden;
}

.heroImage img, .footerHero img{
  height:300px;
  overflow:hidden;
}

.persona .color3  li, .circlePods .color3 li  {
  width:100%;
  margin-top:127px;
}

.persona .color3, .circlePods .color3 {
  margin-top:0px !important;
}

.lowerContent .blueLink p{
width:300px;
}

.howToUse > img, .howToUse ul li{
width:100%;
}

.howToUse ul li{
  margin-bottom:20px;
}

.howToUse .containText{
  width:100%;
  margin-top:20px;
}

.howToUse .containText h2{
  text-align:center;
}

.howToUse .containText .blueLink p {
  float:none;
}

.howToUse{
  padding:100px 0px 0px 0px;
}

.howToUse ul{
  padding:40px 0px 0px 0px;
}

.rightContent, .leftContent{
  width:100%;
  margin-top:40px;
}

.dropDownTable td h2{
  padding-left:0px;
  text-align:center;
}

.dropDownTable td{
  padding:5px;
  display:block;
  width:100% !important;
}

.dropDownTable tr{
  display:block;
  padding:20px 0px;
}

.dropDownTable .jcf-select{
  width:80% !important;
}

.PSsec .jcf-button, .pdfSec a{
  transform:initial;
  left:auto !important;
  bottom:auto;
  position:relative !important;
}


.landingPage li, .landingPage li img, .landingPage{
  width:100% !important;
}

.landingPage .landingText p{
  margin:20px 0px;
}

.landingText{
  padding-left:0px !important;
}

.landingPage .landingPad{
  padding:20px 0px;
}

.pdfList li{
width:100% !important;
}

.dropDownTable .jcf-select{
  width:250px !important;
}

.PSsec .pdfSec{
  width:50% !important;
}

.dropDownTable .jcf-button{
  transform:initial;
  left:auto !important;
  bottom:auto;
  position:relative !important;
}

.landingPage td{
  width:100%;
  display:block;
}

.landingPage .landingPad img{
  width:120px;
  padding-right:20px;
}
}

@media (max-width:475px) {
.garages li, .pixieprod, .pixieprod div.captiontitleprod, div.captionprod {
  width: 100%
}
.garages li {
  margin: 0
}
.captionprod img {
  width: 100%;
  height: auto
}
.pixieprod div.trail-textprod, .trail-textprod a {
  display: none
}
.pixieprod div.trail-textprod {
  background-color: transparent
}
}
.article img {
  width: 30%;
  float: left
}
.articleText {
  float: left;
  width: 62%;
  margin-bottom: 10px
}
#specifications, .hs-form .hs-input, .hs-form textarea.hs-input, .ui-tabs .ui-tabs-nav li {
  width: 100%
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  border-top-left-radius: 0;
  border-top-right-radius: 0
}
.pixieprod div.captiontitleprod {
  height: 42px
}
.productsImg .slick-slide img {
  margin-bottom: 0
}
.next2Slider {
  margin-bottom: 20px
}
#ContentPlaceHolderDefault_PageWrapper_Content_Button1 {
  height: 31px
}
#faq h3 {
  font-size: 1.2rem
}
#sophie .expandSliderACC, .collapseSliderACC {
  font-weight: 300
}
#sophie .sliderACC ul li {
  margin-left: 15px
}
.collapseSliderACC span, .expandSliderACC span {
  vertical-align: text-top!important;
  font-size: 18px
}
.collapseSliderACC a, .expandSliderACC a {
  vertical-align: top!important
}

.textPageText .leftContent,.textPageText .rightContent{
  width:100%;
}

.heroImage img, .footerHero img{
  width:auto;
}

.footerHero{
  overflow:hidden;
}

.mobiFix{
  width:70%;
}

.lowerLink .left, .lowerLink .right, .lowerLink .blueLink p{
  width:100%;
}

  .blueLink p{
  padding:10px 0px;
}}

@media all and (orientation:landscape) {
#fgLogo {
  margin-left: 20px!important;
  width: 130px
}
.thumbnails ul {
  width: 90%
}
.thumbnails li {
  width: 22.5%;
  margin: 1% 4.8%
}
.slickSlide h1, .slickSlide p {
  color: #fff;
  margin: 5px 0 0 10px
}
.thumbnails p {
  font-size: 1.2em
}
.slideText {
  width: 40%;
  position: absolute;
  background-color: #000;
  padding: 2%;
  opacity: .8;
  -webkit-border-radius: 5px;
  border-radius: 10px;
  bottom: 12%;
  right: 10%
}
.slickSlide h1 {
  text-align: left;
  font-size: 2.5em;
  text-transform: uppercase;
  line-height: .9
}
.slickSlide p {
  display: block;
  padding-bottom: 5px;
  font-size: 1em
}
.slideButtons {
  margin: auto;
  width: 100%
}
.blueBtn {
  margin: 5px 0 5px 10px;
  float: left
}
#icons {
  margin: 10px auto 0;
  width: 85%
}
.breadcrumbs li a {
  font-size: 8px!important
}
footer .theChange {
  font-size: 10px!important
}
.expandSlider span {
  font-size: 20px
}
footer a {
  font-size: 10px!important
}
#ContentPlaceHolderDefault_PageWrapper_Content_distDiv h3 {
  font-size: 26px
}
#ContentPlaceHolderDefault_PageWrapper_Content_distDiv {
  font-size: 12px
}
#contacttop h1 {
  font-size: 26px!important
}
#contacttop h2, .contactleft h2 {
  font-size: 22px!important
}
#contacttop p {
  font-size: 18px!important
}
.contactleft li, .hs-form.stacked label {
  font-size: 12px!important
}
p {
  -webkit-text-size-adjust: 100%
}
.ui-tabs .ui-tabs-nav li {
  font-size: 18px
}
.next2Slider {
  font-size: 18px!important
}
.next2Slider ul li span {
  font-size: 11px!important
}
#tabs-2 ul li a, #tabs-3 ul li, #tabs-4 ul li, #tabs-5 ul li, #tabs-6 ul li, #tabs-7 ul li, #tabs-8 ul li {
  font-size: 12px!important
}
.next2Slider ul li, .productBrochures p {
  font-size: 18px!important
}
.productBrochures ul li {
  font-size: 11px!important
}
.dl-menuwrapper li a {
  font-size: 18px!important
}
.dl-menuwrapper li ul li a {
  font-size: 12px!important
}
.togglerACC img {
  margin-right: 10px!important
}
.textPageText, .togp {
  font-size: 18px!important
}
.sliderACC, .textPageText ul li {
  font-size: 11px!important
}
.textPageText ul li {
  line-height: 16px
}
.productBrochures ul li a, .sliderACC {
  line-height: 14px!important
}
#faq h3 {
  line-height: 24px!important
}
#faq p {
  font-size: 21px!important;
  line-height: 26px
}
.captiontitleprod h2 {
font-size:24px!improtant
}
#sophie .sliderACC ul {
  font-size: 21px!important;
  line-height: 26px
}
#sophie .sliderACC ul li {
  margin-left: 15px
}
.collapseSliderACC span, .expandSliderACC span {
  font-size: 25px
}
}
 













































/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */


/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */