*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

.container > header {
 width: 90%;
 max-width: 69em;
 margin: 0 auto;
 padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
 font-size: 2.125em;
 line-height: 1.3;
 margin: 0 0 0.6em 0;
 float: left;
 font-weight: 400;
}

.container > header > span {
 display: block;
 position: relative;
 z-index: 9999;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.5em;
 padding: 0 0 0.6em 0.1em;
}

.container > header > span span:after {
 width: 30px;
 height: 30px;
 left: -12px;
 font-size: 50%;
 top: -8px;
 font-size: 75%;
 position: relative;
}

.container > header > span span:hover:before {
 content: attr(data-content);
 text-transform: none;
 text-indent: 0;
 letter-spacing: 0;
 font-weight: 300;
 font-size: 110%;
 padding: 0.8em 1em;
 line-height: 1.2;
 text-align: left;
 left: auto;
 margin-left: 4px;
 position: absolute;
 color: #fff;
 background: #47a3da;
}

.container > header nav {
 float: right;
 text-align: center;
}

.container > header nav a {
 display: inline-block;
 position: relative;
 text-align: left;
 width: 2.5em;
 height: 2.5em;
 background: #fff;
 border-radius: 50%;
 margin: 0 0.1em;
 border: 4px solid #47a3da;
}

.container > header nav a > span {
 display: none;
}

.container > header nav a:hover:before {
 content: attr(data-info);
 color: #47a3da;
 position: absolute;
 width: 600%;
 top: 120%;
 text-align: right;
 right: 0;
 pointer-events: none;
}

.container > header nav a:hover {
 background: #47a3da;
}

.container > header nav .bp-icon:after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 line-height: 2;
 text-indent: 0;
}

.container > header nav a:hover:after {
 color: #fff;
}

@media screen and (max-width: 55em) {

 .container > header h1,
 .container > header nav {
  float: none;
 }

 .container > header > span,
 .container > header h1 {
  text-align: center;
 }

 .container > header nav {
  margin: 0 auto;
 }

 .container > header > span {
  text-indent: 30px;
 }
}


.cbp-pgcontainer {
 position: relative;
 width: 100%;
 padding: 0px 0px 0px 0px;
}

.cbp-pgcontainer ul,
.cbp-pgcontainer li {
 padding: 0;
 margin: 0;
 list-style-type: none;
}

.cbp-pggrid {
 position: relative;
 text-align: center;
}
/* If flexbox is supported we'll use it to lay out the grid */
.flexbox .cbp-pggrid {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: flex;
 -webkit-flex-flow: row wrap;
 -moz-flex-flow: row wrap;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap;
 -webkit-justify-content: center;
 -moz-justify-content: center;
 -ms-justify-content: center;
 -webkit-justify-content: center;
}

.cbp-pggrid > li {
 display: inline-block;
 vertical-align: top;
 position: relative;
 /*width: 33%;*/
 /*min-width: 250px;*/
 max-width: 500px;
 padding: 0px 1% 50px 1%;
 text-align: left;
 transition: 0.5s ease;
 -webkit-transition: 0.5s ease;
 -moz-transition: 0.5s ease;
 /*padding: 0px 20px 44px 20px;*/
 padding: 0px 5px 12px 5px;
}

.cbp-pggrid > li:hover {
/* -webkit-transform: scale(1.048);
 transform: scale(1.048);
 -webkit-font-smoothing: subpixel-antialiased;
 backface-visibility: hidden;    
 -webkit-filter: blur(0);*/
}

.flexbox .cbp-pggrid > li {
 display: block;
}

.cbp-pgcontent {
 /*border: 3px solid #7d7d7d;*/
 position: relative;
 background-color: rgb(255,255,255);
 /*background-color: rgba(234,234,234,0.58);*/
 /*padding: 40px 15px 15px 15px;*/
 /*padding: 15px;*/
 /*border-radius: 15px;*/
    -webkit-box-shadow: 0 20px 30px 0 rgba(0,0,0,.07);
    box-shadow: 0 20px 30px 0 rgba(0,0,0,.07);
    border-style: solid;
    border-width: 10px;
    border-image-slice: 1;
    border-color: #d4d3d3;
 border-width: 1px;
    padding: 23px;
}

.questionBox{ border-radius: 15px !important;border-width: 0px; }
@media (max-width: 767px){.questionBox{ padding: 10px 10px 0px 10px !important;} }

.cbp-pgrotate {
 width: 36px;
 height: 36px;
 position: absolute;
 display: block;
 color: transparent;
 font-size: 0;
 z-index: 100;
 border-bottom: 3px solid #47a3da;
 border-left: 3px solid #47a3da;
 right: 0px;
 top: 0px;
 cursor: pointer;
 text-align: center;
}

.cbp-pgrotate:before {
 font-size: 18px;
 line-height: 32px;
 color: #47a3da;
}

.no-touch .cbp-pgrotate:hover,
.cbp-pgrotate.cbp-pgrotate-active {
 background: #47a3da;
}

.no-touch .cbp-pgrotate:hover:before,
.cbp-pgrotate.cbp-pgrotate-active:before {
 color: #fff;
}

/* The item with the images will have perspective */
.cbp-pgitem {
 width: 100%;
 position: relative;
 /*padding: 2em;*/
 -webkit-perspective: 1400px;
 -moz-perspective: 1000px;
 perspective: 1000px;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
}

/* The flip container */
.cbp-pgitem-flip {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition: -webkit-transform .4s ease-out;
 -moz-transition: -moz-transform .4s ease-out;
 transition: transform .4s ease-out;
}

/* If you want to rotate on hover instead of click, you could use something like this: 
.cbp-pgrotate:hover + .cbp-pgitem .cbp-pgitem-flip
*/
.cbp-pgitem.cbp-pgitem-showback .cbp-pgitem-flip {
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 transform: rotateY(180deg);
}

.cbp-pgitem-flip img {
 display: block;
 margin: 0 auto;
 max-width: 100%;
 max-height: 100%;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
}

.cbp-pgitem img:first-child {
 position: relative;
}

/* The second image will be rotated so that we'd be looking at the back of it */
.cbp-pgitem img:nth-child(2) {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translateX(-50%) translateY(-50%) rotateY(-180deg);
 -moz-transform: translateX(-50%) translateY(-50%) rotateY(-180deg);
 transform: translateX(-50%) translateY(-50%) rotateY(-180deg);
}

/* Fallback for browsers that don't support 3d transforms */
.no-csstransforms3d .cbp-pgitem img:nth-child(2) {
 position: relative;
 top: 0;
 left: 0;
 display: none;
}

.no-csstransforms3d .cbp-pgitem.cbp-pgitem-showback img:first-child {
 display: none;
}

.no-csstransforms3d .cbp-pgitem.cbp-pgitem-showback img:nth-child(2) {
 display: block;
}

/* The options bar */
.cbp-pgoptions {
 height: 60px;
 width: 100%;
  border-top: 3px solid #47a3da;;
}

.cbp-pgoptions > li {
 width: 20%;
 height: 100%;
 float: left;
 position: relative;
 display: block;
 cursor: pointer;
 color: transparent;
 font-size: 0;
 border-left: 3px solid #47a3da;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.cbp-pgoptions > li:first-child {
 border-left: none;
} 

.no-touch .cbp-pgoptions li {
 color: #47a3da;
}

.no-touch .cbp-pgoptions li:hover,
.cbp-pgoptions li.cbp-pgoption-active {
 background: #47a3da;
}

.cbp-pgoptions li:before,
.cbp-pgoptions li > span {
 font-size: 22px;
 line-height: 60px;
 text-indent: 0;
 text-align: center;
 color: #47a3da;
}

.no-touch .cbp-pgoptions li:hover:before,
.no-touch .cbp-pgoptions li:hover > span,
.cbp-pgoptions li.cbp-pgoption-active > span  {
 color: #fff;
}

.cbp-pgoptions li.cbp-pgoptsize > span {
 font-size: 22px;
}

.cbp-pgoptions li > span {
 display: block;
}

.cbp-pgoptions li:before {
 position: absolute;
 width: 100%;
 height: 100%;
}

/* Icons */
.cbp-pgoptcompare, 
.cbp-pgoptcart, 
.cbp-pgoptfav,
.cbp-pgrotate {
 font-family: 'pgicons';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}

.cbp-pgoptcompare:before {
 content: "\e001";
}

.cbp-pgoptfav:before {
 content: "\e003";
}

.cbp-pgoptfav.cbp-pgoptfav-selected:before {
 content: "\e002";
 color: #ee73b8;
}

.cbp-pgoptfav.cbp-pgoptfav-selected:hover:before {
 color: #f9c0e0;
}

.cbp-pgoptcart:before {
 content: "\e000";
}

.cbp-pgrotate:before {
 content: "\e004";
}

/* Tooltips */
.cbp-pgopttooltip {
 position: absolute;
 bottom: 180%;
 margin-bottom: 0px;
 background: #fff;
 padding: 25px;
 width: 100px;
 left: 50%;
 margin-left: -50px;
 border: 3px solid #47a3da;
 opacity: 0;
 z-index: 1000;
 visibility: hidden;
 pointer-events: none;
 -webkit-transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s;
 -moz-transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s;
 transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s;
}

.cbp-pgoptions li:hover .cbp-pgopttooltip,
.cbp-pgoptions li.cbp-pgoption-active .cbp-pgopttooltip {
 visibility: visible;
 opacity: 1;
 -webkit-transition-delay: 0s;
 -moz-transition-delay: 0s;
 transition-delay: 0s;
 bottom: 100%;
 pointer-events: auto;
}

.cbp-pgopttooltip:after,
.cbp-pgopttooltip:before {
 top: 100%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

.cbp-pgopttooltip:after {
 border-color: transparent;
 border-top-color: #fff;
 border-width: 10px;
 left: 50%;
 margin-left: -10px;
}

.cbp-pgopttooltip:before {
 border-color: transparent;
 border-top-color: #47a3da;
 border-width: 14px;
 left: 50%;
 margin-left: -14px;
}

/* Size tooltip */
.cbp-pgoptsize .cbp-pgopttooltip {
 margin-left: -50px;
}

.cbp-pgoptsize .cbp-pgopttooltip span {
 display: block;
 text-indent: 0;
 background: url(../images/tshirt.svg) no-repeat center center;
 background-size: 100%;
 margin: 0 auto 4px;
 text-align: center;
 font-size: 12px;
 font-weight: 700;
 color: #65b3e2;
}

.cbp-pgoptsize .cbp-pgopttooltip span:hover {
 color: #0968a1;
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 transform: scale(1.1);
}

.cbp-pgoptsize .cbp-pgopttooltip span[data-size="XL"] {
 width: 44px;
 height: 44px;
 line-height: 44px;
}

.cbp-pgoptsize .cbp-pgopttooltip span[data-size="L"] {
 width: 40px;
 height: 40px;
 line-height: 40px;
}

.cbp-pgoptsize .cbp-pgopttooltip span[data-size="M"] {
 width: 34px;
 height: 34px;
 line-height: 34px;
}

.cbp-pgoptsize .cbp-pgopttooltip span[data-size="S"] {
 width: 30px;
 height: 30px;
 line-height: 30px;
}

/* Color tooltip */
.cbp-pgoptcolor .cbp-pgopttooltip {
 padding: 5px;
}

.cbp-pgoptions li.cbp-pgoptcolor > span,
.cbp-pgoptcolor .cbp-pgopttooltip span {
 display: block;
 margin: 12px auto 0;
 text-indent: -900em;
}

.cbp-pgoptions li.cbp-pgoptcolor > span {
 width: 36px;
 height: 36px;
 border: 3px solid #fff;
}

.cbp-pgoptcolor .cbp-pgopttooltip span {
 float: left;
 margin: 4px;
 width: 34px;
 height: 34px;
}

.no-touch .cbp-pgoptcolor .cbp-pgopttooltip span:hover {
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 transform: scale(1.1);
}

.cbp-pgoptcolor span[data-color="c1"] {
 background: #72bbe9;
}

.cbp-pgoptcolor span[data-color="c2"] {
 background: #e577aa;
}

.cbp-pgoptcolor span[data-color="c3"] {
 background: #e5b178;
}

.cbp-pgoptcolor span[data-color="c4"] {
 background: #7abe93;
}

.cbp-pginfo {
 padding-top: 10px;
}

.cbp-pginfo:before,
.cbp-pginfo:after {
 content: " ";
 display: table;
}

.cbp-pginfo:after {
 clear: both;
}

.cbp-pginfo h3,
.cbp-pginfo span {
 float: left;
 width: 50%;
 font-size: 1.8em;
 padding: 10px 5px;
 margin: 0;
}

.cbp-pginfo h3 {
 font-weight: 300;
}

.cbp-pginfo span {
 font-weight: 700;
 text-align: right;
}
/* Media Queries */

@media screen and (max-width: 768px) {
 .cbp-pggrid > li {
  width: 48%;
 }
}

@media screen and (max-width: 46.125em) {
 .cbp-pggrid > li {
  width: 48%;
  padding: 0px 10px 23px 10px !important;
 }
}

@media screen and (max-width: 544px) {
 .cbp-pggrid > li {
  /*width: 100%;*/
  min-width: 100px !important;
 }
}
@media screen and (max-width: 1024px) {
 .cbp-pggrid-questions > li {
  width: 43% !important;
 }
}


.productImg {
  width: 200px;
  height: 200px;
  /*border-radius: 15px;*/
}
.questionImg {
  width: 250px;
  height: 250px;
}
@media (max-width: 767px) {
 .productImg{
   /*border-radius: 8px;*/
   width: 100% !important;
   height: 100%;
   max-width: 130px;
   margin: 0 auto;
 }
 .questionImg{
   width: 100% !important;
   height: 100%;
 }
 .cbp-pgcontent{
   padding: 18px 0px 20px 0px;
 }
 .mobileNoTextBox{
  padding: 9px 0px 11px 0px !important;
 }
 .boxIsSelected{
  padding: 9px 0px 11px 0px !important;
 }
 .questionBoxIsSelected{
  /*padding: 9px 0px 11px 0px !important;*/
  padding: 10px !important;
 }
}



/*
@media (max-width: 1600px) {
  .content-form{
   max-width: 1000px !important;
  }
  .productImg{
    width: 180px;
  }
}
@media screen and (max-width: 544px) {
  .productImg{
    width: 150px;
  }
}
@media only screen and (max-width: 380px){
  .productImg{
    width: 150px;
  }
}
@media only screen and (max-width: 320px){
  .productImg{
    width: 150px;
  }
}
*/

.productTitle {
 font-family: 'Oswald', sans-serif;
 padding: 0px;
 margin: 0px 0px 5px 0px;
 font-weight: 600;
 color: #333;
 text-transform: uppercase;
}
.productPrice {
 font-family: 'Oswald', sans-serif;
 margin-top: -5px;
 font-size: 14px;
 color: #333;
 text-transform: uppercase;
}
.productPrice2 {
 font-family: sans-serif;
 margin-top: -5px;
 font-size: 14px;
 color: #333;
 text-transform: uppercase;
}
.productType {
 margin: 20px 0px 20px 0px;
 color: #333;
 text-transform: uppercase;
 font-family: 'Oswald', sans-serif;
 font-size: 25px;
 letter-spacing: 0.05em;
}
.topSectionFilter:focus{
 text-decoration:none !important;
 color:#333;
 outline:none !important;
}
.RiderImg {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/*top menu*/
.SFtopMenu{
 background: #f8f8f8; 
}
.SFtopMenu_mainNav_a{
 color: #333 !important;
}
.SFtopMenu_mainNav_li:hover{
 background-color: rgb(234, 234, 234) !important;
}

/*Product Page*/
.productImgPG {
  width: 650px;
  border-radius: 2px;
}
@media (max-width: 1600px) {
  .productImgPG{
    width: 650px;
  }
}
@media (max-width: 1450px) {
  .productImgPG{
    width: 400px;
  }
}
@media (max-width: 1000px) {
  .productImgPG{
    width: 350px;
  }
}
@media only screen and (max-width: 380px){
  .productImgPG{
    width: 300px;
  }
}
@media only screen and (max-width: 320px){
  .productImgPG{
    width: 250px;
  }
}
.gridPG > li {
 min-width: 250px;
 max-width: 650px;
}
.gridPG > li:hover {
 -webkit-transform: scale(1);
 transform: scale(1);
 -webkit-font-smoothing: subpixel-antialiased;
 backface-visibility: hidden;    
 -webkit-filter: blur(0);
}
.productInfo {
 margin: 80px 0px 0px 0px;
 width:100%;
 text-align:left;
 padding-left: 20px;
}
@media (max-width: 1000px) {
  .productInfo{
   margin: 10px 0px 0px 0px;
  }
} 
@media (max-width: 740px) {
  .productInfo{
   margin: 0px 0px 0px 0px;
   text-align:center;
   padding-left: 10px;
   padding-right: 10px;
  }
} 

@font-face{
 font-family:'fontello';
 src:url(../fonts/fontello.eot?95896642);
 src:url(../fonts/fontello.eot?95896642#iefix) format('embedded-opentype'),
     url(../fonts/fontello.woff2?95896642) format('woff2'),
     url(../fonts/fontello.woff?95896642) format('woff'),
     url(../fonts/fontello.ttf?95896642) format('truetype'),
     url(../fonts/fontello.svg?95896642#fontello) format('svg');
  font-weight:400;
  font-style:normal;
}

[class*=" icon-"]:before,[class^=icon-]:before{font-family:"fontello";font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.icon-fwf:before{content:'\e912'}
.icon-organic-textiles:before{content:'\e8a8'}
.icon-carbon-trust:before{content:'\e8a7'}
.icon-confidence-in-textiles:before{content:'\e8a5'}

.addToCartButton:hover{
 border-color:#000000 !important;
 background-color: rgb(0, 0, 0) !important;
 color: #ffffff;
}

/*Life-style Photos*/
.lifestyleProductPhoto {
  width: 1024px;
  border-radius: 2px;
}
@media (max-width: 1024px) {
  .lifestyleProductPhoto{
   width: 93%;
  }
  .garmentProductSection{
   width: 95% !important;
  }
}
/*@media (max-width: 1000px) {
  .lifestyleProductPhoto{
   width: 960px;
  }
}
@media only screen and (max-width: 380px){
  .lifestyleProductPhoto{
    width: 340px;
  }
}
@media only screen and (max-width: 320px){
  .lifestyleProductPhoto{
    width: 280px;
  }
}*/
/*Hats - Product Page*/
.productImgHatsDT {
  width: 450px;
  border-radius: 2px;
}
@media (max-width: 1600px) {
  .productImgHatsDT{
    width: 450px;
  }
}
@media (max-width: 1450px) {
  .productImgHatsDT{
    width: 400px;
  }
}
@media (max-width: 1000px) {
  .productImgHatsDT{
    width: 350px;
  }
}
@media only screen and (max-width: 380px){
  .productImgHatsDT{
    width: 300px;
  }
}
@media only screen and (max-width: 320px){
  .productImgHatsDT{
    width: 250px;
  }
}
/* Life-style photos <hr> tag */
hr.lifeStylePhotos {
 margin-bottom: 40px;
 margin-top:20px;
 padding: 0;
 border: none;
 height: 1px;
 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 color: #333;
 text-align: center;
}
/* Product-style photos <hr> tag */
hr.hrProductPhotos {
 margin-bottom: 0px;
 margin-top:20px;
 padding: 0;
 border: none;
 height: 1px;
 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 color: #333;
 text-align: center;
 opacity: 0.5;
}

/*Rider Photo*/
.riderMainPhoto {
  width: 200px;
  border-radius: 2px;
}
@media (max-width: 1600px) {
  .riderMainPhoto{
    width: 200px;
  }
}
@media (max-width: 1450px) {
  .riderMainPhoto{
    width: 150px;
  }
}
@media (max-width: 1000px) {
  .riderMainPhoto{
    width: 100px;
  }
}
@media only screen and (max-width: 380px){
  .riderMainPhoto{
    width: 50px;
  }
}
@media only screen and (max-width: 320px){
  .riderMainPhoto{
    width: 25px;
  }
}
/*Rider Videos*/
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
/*Rider HR*/
.riderHR {
 margin-bottom: 40px;
 margin-top:20px;
 padding: 0;
 border: none;
 height: 1px;
 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 color: #333;
 text-align: center;
}
/*Rider Insta*/
.riderInsta {
  width: 200px;
  border-radius: 2px;
}
@media (max-width: 1600px) {
  .riderInsta{
    width: 200px;
  }
}
@media only screen and (max-width: 380px){
  .riderInsta{
    width: 300px;
  }
}
@media only screen and (max-width: 320px){
  .riderInsta{
    width: 250px;
  }
}
.mobileToolsScreen{
 margin-top: 50px !important;
 z-index: 9999999 !important;
 border: 1px solid #fff;
 border-left: 0px;
 border-top: 0px;
 border-bottom-right-radius: 5px;
 color: #333;
 background: #f8f8f8 !important;
 height: 375px !important;
 width: 140px !important;
}


.item_minimized {
  transition: transform 1s;
  transform: scaleX(0) scaleY(0);
}
.item_maximized {
  transform: scaleX(1) scaleY(1);
}


/* ==== Custom Toggle Switch ==== */
.switch-checkbox {
  display: none;
}
.switch {
  width: 38px;
  height: 21px;
  display: inline-block;
  position: relative;
  border: 2px solid #e5e5e5;
  border-radius: 15px;
  background: #f6f4f4;
  cursor: pointer;
  transition: 0.2s;
  text-align: center;
}
.switch:after {
  content: ' ';
  color: #e5e5e5;
  top: 0px;
  left: 0px;
  width: 17px;
  height: 17px;
  position: absolute;
  border-radius: 50%;
  background: #f6f4f4;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  transition: 0.3s;
  font-size: 15px;
  font-weight: 600;
}

.switch-checkbox:checked + .switch {
 /* background: #f0b428;
  border-color: #f0b428;*/
}

.switch-checkbox:checked + .switch:before {
  transform: scale(0);
  transition: 0s;
}

.switch-checkbox:checked + .switch:after {
  left: calc(100% - 17px);
  /*content: '\2713';*/
  color: #ccc;
background: rgba(76,207,186,.2);
}

@media screen and (max-width: 767px) {
 .switch {
   top: 15px !important;
    left: 25px !important;
   width: 27px;
   height: 13px;
   opacity: 0;
 }
 .switch:after {
   width: 9px;
   height: 9px;
   font-size: 7px;
   font-weight: 900;
 }
 .switch-checkbox:checked + .switch:after {
   left: calc(100% - 9px);
 }
}

.iconWithGrid{
 width: 16px !important;
 height: 16px !important;
}

.boxIsSelected{
 /*border: 3px solid #f0b428 !important;*/
 /*border-image-source: linear-gradient(137deg,rgba(76,207,186,.2),rgba(1,116,254,.2));*/
 border-width: 10px;
 padding: 14px;
 border-image-source: linear-gradient(to right, #4bcebb, #0275fd);
}

.questionBoxIsNotSelected{
    /*background-color: rgb(143 229 255);
    border-color: rgb(143 229 255);*/
 border-radius: 15px;
    padding: 10px;
    background-color: rgb(255 255 255 / .4);
}
.questionBoxIsSelected{
    background-image: linear-gradient(to right, #4bcebb, #0275fd);
}


.or_separator{
 background-color: white;
 color: #000;
 border-radius: 5px;
 padding: 5px;
 font-weight: 700;
 font-size: 14px;
 margin-top: 180px; 
}
@media screen and (max-width: 767px) { .or_separator{margin-top: 143px;} }
@media screen and (max-width: 414px) { .or_separator{margin-top: 109px;} }
@media screen and (max-width: 360px) { .or_separator{margin-top: 98px;} }
@media screen and (max-width: 320px) { .or_separator{margin-top: 91px;} }

.question_text{text-align: center;margin-top: 22px;font-size: 20px;width: 250px;height: 65px;}
@media (max-width: 767px){ .question_text{ height: 215px;width: 100% !important; } }
@media (max-width: 375px){ .question_text{ font-size: 19px; } }
@media (max-width: 320px){ .question_text{ font-size: 17px; } }