/*----- Card Styles Light Up -----*/
.cardWhiteBoard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  border:1px solid #D17811;
  width:93.75%;
  height:0;
  padding-bottom:49.5525%;
  background-image: url('../images/flatGuide.svg');
  background-repeat: no-repeat;
  background-position: center; 
  background-size: contain;
  vertical-align: bottom;
  justify-content: bottom;
  position: relative;
  margin-bottom: 1.5em;
}

.cardNav {
  -moz-justify-content: space-around;
       justify-content: space-around;
  position: relative;
  width:93.75%;
  margin:.3em auto 0;
  z-index: 100;
}

.cardNav ul li {
  width:20%;
  display:inline-block;
}

/*----- Begin WHITEBOARD Card Styles -----*/
.flex {
  -moz-flex:0 1 auto;
  -webkit-box-flex:0;
  -ms-flex:0 1 auto;
      flex:0 1 auto;
  align-self: flex-end;
  border:1px solid #D17811;
  background-color: #FFF;
  vertical-align: middle;
  text-align: center;
  -webkit-box-shadow: 8px 8px 8px rgba(0, 0, 0, .1);
  -moz-box-shadow: 8px 8px 8px rgba(0, 0, 0, .1);
  box-shadow: 8px 8px 8px rgba(0, 0, 0, .1);
  margin-bottom:-39.65em;
  display: none;
  /*
  margin-bottom: -52.583%;
  */
  position: relative;
} 

.flex p {
    font:500 calc(.4em + .5vw) "Raleway", Verdana, sans-serif;
	color: #999;
	letter-spacing: .1em;
    margin:0 auto;
    text-align: center;
}

.grad {
    background: -webkit-linear-gradient(right, white 50%, #F0F0F0 50%, white 60%);
    background: -moz-linear-gradient(right, white 50%, #F0F0F0 50%, white 60%);
    background: -ms-linear-gradient(right, white 50%, #F0F0F0 50%, white 60%);
    background: linear-gradient(right, white 50%,#F0F0F0 50%, white 60%);
}

.lrgGate {
    background: -webkit-linear-gradient(
      right, white 12.5%, #F0F0F0 12.5%, white 30%, white 62.5%, #F0F0F0 62.5%, white 80%, white 100%);
    background: -moz-linear-gradient(
      right, white 12.5%, #F0F0F0 12.5%, white 30%, white 62.5%, #F0F0F0 62.5%, white 80%, white 100%);
    background: -ms-linear-gradient(
      right, white 12.5%, #F0F0F0 12.5%, white 30%, white 62.5%, #F0F0F0 62.5%, white 80%, white 100%);
    background: linear-gradient(
      right, white 12.5%, #F0F0F0 12.5%, white 30%, white 62.5%, #F0F0F0 62.5%, white 80%, white 100%);
}

.gateGrad {
    background: -webkit-linear-gradient(
      right, white 25%, #F0F0F0 25%, white 40%, white 75%, #F0F0F0 75%, white 90%, white 100%);
    background: -moz-linear-gradient(
      right, white 25%, #F0F0F0 25%, white 40%, white 75%, #F0F0F0 75%, white 90%, white 100%);
    background: -ms-linear-gradient(
      right, white 25%, #F0F0F0 25%, white 40%, white 75%, #F0F0F0 75%, white 90%, white 100%);
    background: linear-gradient(
      right, white 25%, #F0F0F0 25%, white 40%, white 75%, #F0F0F0 75%, white 90%, white 100%);
}

.triGrad {
    background: -webkit-linear-gradient(
      right, white 32.5%, #F0F0F0 32.5%, white 47%, white 67%, #F0F0F0 67%, white 82%, white 100%);
    background: -moz-linear-gradient(
     right, white 32.5%, #F0F0F0 32.5%, white 47%, white 67%, #F0F0F0 67%, white 82%, white 100%);
    background: -ms-linear-gradient(
      right, white 32.5%, #F0F0F0 32.5%, white 47%, white 67%, #F0F0F0 67%, white 82%, white 100%);
    background: linear-gradient(
      right, white 32.5%, #F0F0F0 32.5%, white 47%, white 67%, #F0F0F0 67%, white 82%, white 100%);
}


/*----- FLAT Cards -----*/
.std {
  width:31.417%;
  padding-top:18em;
}

.sqr {
  width:31.417%;
  padding-top:23.35em;
}

.slim {
  width:52.875%;
  padding-top:16.7em;
}

.lrg {
  width:40%;
  padding-top:21.3em;
}

.gnd {
  width:48.583%;
  padding-top:23.4em;
}


/*----- FOLDING Cards -----*/
.stdFold {
  width:48.583%;
  padding-top:23.4em;
}

.sqrFold {
  width:62.834%;
  padding-top:23.4em;
}

.slimFold {
  width:44.4%;
  padding-top:39.55em;
}

.lrgFold {
  width:57.142%;
  padding-top:29.9em;
}

.gndFold {
  width:62.833%;
  padding-top:36.2em;
}


/*----- STRETCH FOLDING Cards -----*/
.stdStrch {
  width:62.833%;
  padding-top:18em;
}

.slimStrch {
  width:100%;
  padding-top:16.65em;
}

.lrgStrch {
  width:80%;
  padding-top:21.3em;
}

.gndStrch {
  width:97.166%;
  padding-top:23.35em;
}


/*----- GATEFOLD Cards -----*/
/*----- Gate Folds use existing cards
        from above w/ a changed grad -----*/

/*----- TRIFOLD Cards -----*/
.sqrTri {
  width:94.333%;
  padding-top:23.35em;
}

.lrgTri {
  width:85.713%;
  padding-top:29.9em;
}

.gndTri {
  width:94.333%;
  padding-top:36.2em;
}
/* ----- End Whiteboard Cards ----- */




/* ----- BEGIN Original Card Styles ----- */
.flat, .fold, .stretch, .gate, .tri {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin:0 auto;
        margin-top:2.5%;
        -ms-flex-pack: distribute;
    justify-content: space-around;
}

.flat {
    width:74%;
    padding-left:3.5%;
    margin-bottom:5%;
}

.fold {
    width:95%;
    padding-left: 3.5%;
    margin-bottom:5%;
}

.stretch {
    width:77%;
    padding-right: 1.5%;
}

.gate {
    width:65%;
    padding-left: 1.5%;
    margin-bottom:5%;
}

.tri {
    width:65%;
    padding-left:1.75%;
    margin-bottom:4%;
}

.styleBox {
    width:20%;
    height:100%;
}

.styleText {
    -webkit-box-flex:0;
        -ms-flex:0 1 auto;
            flex:0 1 auto;
    width:100%;
    font:500 .75em "Raleway", Verdana, sans-serif;
    line-height: 1.4em;
	font-style:normal;
    color: #B2B2B2; 
    text-align: left;
	letter-spacing: .05em;
	word-spacing: .1em;
    margin-bottom:4%;
}

.size {
    font-weight:500!important;
    font-size:1.2em;
    color: #D17811; 
    text-align: left;
	letter-spacing: .05em;
    margin-bottom:-1%;
    white-space: nowrap;
}

.style {
    font-size:80%;
    font-weight:300;
	font-style:normal;
    color: #bfbfbf;
	letter-spacing: .1em;
	word-spacing: .1em;
}

.styleCell {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:100%;
    height:auto;
    text-align: left;
}

.styleCell img {
    -moz-flex:0 1 auto;
    -webkit-box-flex:0;
        -ms-flex:0 1 auto;
            flex:0 1 auto;
    margin-right:5%;
    border: thin Solid #e2ac6b;
    box-shadow: 6px 6px 4px rgba(121, 94, 64, .08);
}

table {
    border-collapse: collapse;
    width: 100%;
    margin:0;
    padding:0;
}

table, td {
    border: none;
    vertical-align: top;
}

img.td {
    max-width:100%;
    max-height:100%;
}

.empty img {
    max-width:6px;
    box-shadow: none;
    border: none;
}

/* ----- End Styles Layout ----- */



/*----- Embellishments -----*/
.snow, .snowHalf {
  margin:0 auto;
  text-align: center;
}

.snow img, .snowHalf img {
  margin-top:3em;
  max-width:100%;
  height:auto;
  border:1px solid #D17811;
  border-radius: 16px;
}

.flakesText, .flakesText2 {
  margin:0 auto!important;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  width:7.333%;
  background-repeat: no-repeat!important;
  background-position: center;
  padding-top:.5em;
  padding-bottom:5em;
  background-size: contain;
}

.flakesText2  {
  height:calc(3em + 6vw);
  width:33.666%;
  background-size:calc(2em + 6vw);
  padding:1vw 0 6vw 0
}

.flakes1 {
  background-image: url(../images/embellish/snow1.svg);
  
}

.flakes2 {
  background-image: url(../images/embellish/snow2.svg);
}

.flakes3 {
  background-image: url(../images/embellish/snow3.svg);
}

.flakes4 {
  background-image: url(../images/embellish/snow4.svg);
}

.flakes5 {
  background-image: url(../images/embellish/snow5.svg);
}

.flakes6 {
  background-image: url(../images/embellish/dot.svg);
}

.flakes, .flakesHalf {
  margin:0 auto!important;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  padding-top:1em;
  text-align:center;
}

.flakesHalf {
  height:11vw;
  width:95%;
  padding-top:.5em;
}

.flakesText span, .flakesText2 span, .embLabel, .embLabel-1, .embLabel-2, .embLabel-k, .embLabel-k1, .embLabel-k2, .embLabel-k3 {
  flex:0 1 auto;
  font:400 1em "Montserrat", Verdana, sans-serif;
  color: #D17811;
  letter-spacing: .125em;
  white-space: nowrap;
  margin-bottom:1.25em;
}

.flakesText2 span  {
  margin-top:-1vw;
 margin-left:calc(2em - 5vw);
  font-size:calc(.6em + 1vw)
}

.spaceTop {
  width:100%;
  margin-top:calc(2em + 4vw);
  display:none;
}

.embellish, .embellish2 {
  position:relative;
  margin:0 auto;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  width:100%;
  padding:.5em;
  justify-content: space-between;
}

.embChild, .embChild2 {
  position:relative;
  max-width:25%;
  padding:1.25em;
  line-height: 1.2em;
}

.embChild2 {
  max-width:50%;
  padding:1.25em;
}

.embChild img, .embChild2 img {
  max-width:100%;
  border:1px solid #D17811;
  border-radius: 16px;
}

.embLabel, .embLabel-1, .embLabel-2 {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:110%;
  letter-spacing: .06em;
}

.embLabel-1 {
  top:20%;
}

.embLabel-2 {
  top:42%;
}

.embLabel-k, .embLabel-k1, .embLabel-k2, .embLabel-k3 {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: .06em;
  line-height: 1.6em;
  font-size:.70em;
  color:#666;
  margin-top:.2em;
  text-align: center;
}

.embLabel-k1 {
  top:29%;
}

.embLabel-k2 {
  top:52%;
}
/*----- END Embellishments -----*/



/*----- Envelopes -----*/
.A-optionText-Left, .A-optionText-Right {
    position: relative;
    margin:0 auto .5em;
    width:46.875%;
    font:400 1em "Montserrat", Verdana, sans-serif;
	color: #999;
	letter-spacing: .02em;
    word-break: keep-all;
    word-wrap: normal;
    text-align: center;
    background:none;
    flex-wrap: nowrap;
}

.A-optionText-Left {
    float:left;
}

.A-optionText-Right {
    float:right!important;
}

.env {
  font:200 1em "Raleway", Verdana, sans-serif;
  color: #ccc;
  letter-spacing: .05em;
  line-height:2.5em;
  text-align: center;
}
/*----- END Envelopes -----*/


@media screen and (max-width: 1280px) {
  .empty img {width:calc(3px + .3vw);}
  .flakesText {height:8.417vw;}
  .flakesText span {margin-top:-1.5vw; }
  .snow {margin-top:calc(1.75vw - 2em);}
  .embellish {padding-top:1.5vw;}
  
  .embChild {padding:0 1.2vw;}
  .embChild2 {margin-top:2vw;
              max-width:50%;
              padding:1.5vw;}
  .embLabel, .embLabel-1, .embLabel-2 {
              font-size:1.5vw;
              top:43%;}
  .embLabel-1 {top:14%}
  .embLabel-k, .embLabel-k1, .embLabel-k2, .embLabel-k3 {
              font-size:1vw;
              line-height: 1.6vw;
              top:53%;}
  .embLabel-k1 {top:25%;}
  .embLabel-k2 {top:54%;}

  .flex {margin-bottom:-49.65vw;}
  .std {padding-top:22.6vw;}
  .sqr, .sqrFold, .sqrTri {padding-top:29.3vw;}
  .slim {padding-top:20.8vw;}
  .lrg {padding-top:26.8vw;}
  .gnd {padding-top:29.3vw;}
  .stdFold {padding-top:29.3vw;}
  .sqrFold {padding-top:29.4vw;}
  .slimFold {padding-top:49.5vw;}
  .lrgFold, .lrgTri {padding-top:37.4vw;}
  .gndFold, .gndTri {padding-top:45.1vw;}
  .stdStrch {padding-top:22.2vw;}
  .slimStrch {padding-top:20.6vw;}
  .lrgStrch {padding-top:26.7vw;}
  .gndStrch {padding-top:29.3vw;}
  .A-optionText-Left, .A-optionText-Right {
        font-size:calc(.75em + .3vw);}
}



@media screen and (min-width: 851px) {
  .flakesHalf {display:none;}
  .snowHalf {display:none;}
}



@media screen and (max-width: 850px) {
  .cardWhiteBoard {margin-bottom:-1vw;}
  .size{font-size:calc(.5em + .95vw);}
  .flakes, .snow {display:none;}
  .snowHalf {max-width:90%;}
  .flakesText2 span {margin-left:calc(10.75vw - .7em);}
  .spaceTop {display:block;}
  .embellish, .embellish2 {flex-wrap:wrap!important;
            justify-content: center;
            margin-top:4vw;}
  .embellish2 {margin-top:0vw;}
  .embChild {max-width:48vw;
            padding:0 3vw;
            margin:2vw 0;}
  .embChild2 {max-width:95vw;
            margin:2vw 0;}
  .embChild img {border-radius:3vw;}
  .embLabel, .embLabel-1, .embLabel-2 {
            font-size:3vw;
            font-weight:400;}
  .embLabel-k, .embLabel-k1, .embLabel-k2, .embLabel-k3 {
            font-size:1.8vw;
            color:#666;}
  .embLabel-k2, .embLabel-k3 {
            line-height: 2.9vw;
            top:54%}
  .A-optionText-Left, .A-optionText-Right {
      font-size:calc(.65em + .3vw);}
}


@media screen and (max-width: 500px) {
  .size {font-size:calc(.5em + .85vw);}
  .styleText {color:#666;
              font-size:50%}
}