/*=======================================================*/
/*                        BANG
/*       SHOPIFY COMPONENTS & STYLING FRAMEWORK
/*             ©CUTTY BANG MULTIMEDIA 2017
/*=======================================================*/


/*-------| GRIDLOCK || ©2017 CUTTY BANG |-------*/

.gridlock                              { position: relative; width: 100%; margin: 0 auto; padding: 0;}
.lane, .lanes, .lock_lane, .lock_lanes { float: left; display: inline;}
.row                                   { margin-bottom: 20px; }

/* Nested lane Classes */
.lane.alpha, .lanes.alpha              { margin-left: 0; }
.lane.omega, .lanes.omega              { margin-right: 0; }

/* Base Grid */
.gridlock .one.lane,
.gridlock .one.lanes                    { width: 4.66666666667%; }
.gridlock .two.lanes                    { width: 13.3333333333%; }
.gridlock .three.lanes                  { width: 22%;            }
.gridlock .four.lanes                   { width: 30.6666666667%; }
.gridlock .five.lanes                   { width: 39.3333333333%; }
.gridlock .six.lanes                    { width: 48%;            }
.gridlock .seven.lanes                  { width: 56.6666666667%; }
.gridlock .eight.lanes                  { width: 65.3333333333%; }
.gridlock .nine.lanes                   { width: 74.0%;          }
.gridlock .ten.lanes                    { width: 82.6666666667%; }
.gridlock .eleven.lanes                 { width: 91.3333333333%; }
.gridlock .twelve.lanes                 { width: 100%; margin-left: 0; }

.gridlock .one-third.lanes              { width: 30.6666666667%; }
.gridlock .two-thirds.lanes             { width: 65.3333333333%; }
.gridlock .one-fifth.lanes              { width: 19.2%; }

/* Offsets */
.gridlock .offset-by-one               { padding-left: 75px;  }
.gridlock .offset-by-two               { padding-left: 150px; }
.gridlock .offset-by-three             { padding-left: 225px; }
.gridlock .offset-by-four              { padding-left: 300px; }
.gridlock .offset-by-five              { padding-left: 375px; }
.gridlock .offset-by-six               { padding-left: 450px; }
.gridlock .offset-by-seven             { padding-left: 525px; }
.gridlock .offset-by-eight             { padding-left: 600px; }
.gridlock .offset-by-nine              { padding-left: 675px; }
.gridlock .offset-by-ten               { padding-left: 750px; }
.gridlock .offset-by-eleven            { padding-left: 825px; }

/*Locked Grid*/
.gridlock .one.lock_lane,
.gridlock .one.lock_lanes                    { max-width: 4.66666666667% !important; }
.gridlock .two.lock_lanes                    { max-width: 13.3333333333% !important; }
.gridlock .three.lock_lanes                  { max-width: 22% !important;            }
.gridlock .four.lock_lanes                   { max-width: 30.6666666667% !important; }
.gridlock .five.lock_lanes                   { max-width: 39.3333333333% !important; }
.gridlock .six.lock_lanes                    { max-width: 48% !important;            }
.gridlock .seven.lock_lanes                  { max-width: 56.6666666667% !important; }
.gridlock .eight.lock_lanes                  { max-width: 65.3333333333% !important; }
.gridlock .nine.lock_lanes                   { max-width: 74.0% !important;          }
.gridlock .ten.lock_lanes                    { max-width: 82.6666666667% !important; }
.gridlock .eleven.lock_lanes                 { max-width: 91.3333333333% !important; }
.gridlock .twelve.lock_lanes                 { max-width: 100% !important; margin-left: 0; }

/* Self Clearing Goodness */
.gridlock:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested lanes,
or wrap each row of lanes in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

/* You can also use a <br class="clear" /> to clear lanes */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

@media (max-width: 750px) {
  .lane,
  .lanes {
    width: 95%;
    box-sizing: border-box; }
}

/*-------| FLEXIBLE | ©2017 CUTTY BANG |-------*/

.flexible {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row wrap;
          flex-direction: row wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.flex-item{
  padding: 5px;
  margin-top: 10px;
}

.flexible.noWrap {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.flexible-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.flexible-left {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}

.flexible-right {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}

.box {
  margin:0;
}


/*-------| VALET | ©2017 CUTTY BANG |-------*/

.valet { position: relative; width: 100%; margin: 0 auto; padding: 0 10px;}
.valet.two { column-count: 2; column-width: auto; column-gap: 10px; }
.valet.three { column-count: 3; column-width: auto; column-gap: 10px; }
.valet.four { column-count: 4; column-width: auto; column-gap: 10px; }
.valet.five { column-count: 5; column-width: auto; column-gap: 10px; }
.valet.six { column-count: 6; column-width: auto; column-gap: 10px; }
.valet.seven { column-count: 7; column-width: auto; column-gap: 10px; }
.valet.eight { column-count: 8; column-width: auto; column-gap: 10px; }


/*-------| THE PACKAGE | ©2017 CUTTY BANG |-------*/

.cbPackage {
  padding: 10px;
  border: 1px solid #ccc;
  width: 300px;
}


#cb-pkUL {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#cb_pkUL-Label {
  border: 3px solid #333;
  font-size: 1rem;
  font-weight: 700;
  display: inline-block;
  padding: 10px 10px;
  cursor: pointer;
  text-align: center;
  &:hover {
    color: darken(#333, 20%);
    border-color: darken(#333, 20%);
  }
}

#cb-pkDD {
  width: 100%;
}

.cd-dropdown,
.cd-select {
	position: relative;
	width: 100%
	margin: 10px auto;
	display: block;
}

.cb_page-width {
  width: 90vw;
  margin: 0 auto;
}


.cb_colBtnBox {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #dedede !important;
}

.cb_colBtnBox:hover {
  -webkit-box-shadow: 0px 0px 52px -12px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 52px -12px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 52px -12px rgba(0,0,0,0.75);
}

.cb_colBtnBox:active {
  -webkit-transform: scale(0.975);
  -moz-transform: scale(0.975);
  -ms-transform: scale(0.975);
  -o-transform: scale(0.975);
  transform: scale(0.975);
  top: 2px;
}

.cb_homeColBtn {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  margin-bottom: 22px;
}

.cb_colBtnBox:focus {
  border: 1px solid #dedede !important;
}

@media only screen and (max-width: 750px) {
  .cb_homeColBtn {
    margin-bottom: 22px;
  }
}

.cb_cartFeedbackWrapper {
  margin-left: 10px;
}

.cb_feedbackText {
  text-transform: italic;
  font-size: .75em;
  font-weight: 700;
  color: rgb(93, 124, 255);
}

.cb_packageComponents {
  width: 300px; 
  clear:both;
  margin: 20px 0;
}

.cb_pkg {
  padding: 10px;
}



/*-------| PRODUCT COMPONENTS | ©2017 CUTTY BANG |-------*/


/*ADD TO CART
------------------------*/

.cb_addToCart {
  margin: 0 0 30px;
}

.cb_atcVariantInput {
}

.cb_atcVariantLabel {
  margin: 10px 0 0;
}

.cb_atcSoldOutInput {
  background: transparent;
  border: 3px solid #333;
  padding: 10px 20px;
  border-radius: 3px;
  text-align: center;
}

.cb_atcFileInput {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#cb_atcFileLabel {
  font-size: 1em;
  font-weight: 700;
  color: white;
  background-color: #ca2027;
  display: inline-block;
  padding: 5px 20px;
}

#cb_atcFileLabel span {
  font-weight: 400;
}

.cb_atcFileInput:focus + label,
#cb_atcFileLabel:hover  {
  background-color: #8c171c;
}

#cb_atcFileLabel:hover {
  cursor: pointer;
}

.cb_atcFileInput:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

.cb_atcFileInput + label * {
	pointer-events: none;
}


/*-------| SITEWIDE | ©2017 CUTTY BANG |-------*/

.cb_siteHomeTextTopBar {
  padding: 10px 0;
  line-height: 0.99;
}

.cb_siteHomeText {
  font-size: 3em;
  color: #555;
  letter-spacing: -2px;
  margin: 0;
  text-align: left;
}



/*-------| BANG UTILITIES | ©2017 CUTTY BANG |-------*/

.cb_displayNone {
  display: none;
}

@media only screen and (max-width: 769px){
  .grid__item {
    padding-left:15px;
  }
}