/* ----- Color & Font Divs ----- */
.colors, .fonts, .f-looks{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center!important;
            justify-content: center!important;
    -webkit-flex-direction: row;
            flex-direction: row;
    -webkit-align-items: center!important;
            align-items: center!important;
    flex-wrap: wrap;
    margin:0 auto;
}

.swatch{
    margin:15px 0;
	width: 86px;
	height: 90px;
    font:500 .6em "Raleway", Verdana, sans-serif;
    letter-spacing: .05em;
    color:#fff;
    padding-top:72px;
    text-align: center;
    display:inline;
}

.fontName, .fontName-L {
    -moz-flex:0 1 auto;
    -webkit-box-flex:0;
     -ms-flex:0 1 auto;
         flex:0 1 auto;
    margin: 0 auto;
    font:500 .8em "Raleway", Verdana, sans-serif;
    letter-spacing: .05em;
    color:#D17811;
    padding-top:3em;
    text-align: center;
    justify-content: space-evenly;
}

.fontName img, fontName-L img{
    width:100%;
    height:auto;
}

.fontName img {
    padding-top:.8em;
}

.fontName-L img{
    padding:1em calc(1em + 2vw );
    width:calc(12vw + 50%);}

.grey {
    color:#666;
}

.f-looks {  
    margin-top:.75%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}



/*--- Color divs below ---*/
/*--- Row 1 ---*/
.c11 {background: #F93B15;}

.c12 {background: #F72613;}

.c13 {background: #EC1307;}

.c14 {background: #D50E04;}

.c15 {background: #A31707;}

.c16 {background: #A2320D;}

.c17 {background: #9A4B04;}

.c18 {background: #883E07;}

.c19 {background: #733008;}

.c110 {background: #662910;}

.c111 {background: #5A1821;}

.c112 {background: #74172D;}

.c113 {background: #7F1832;}

.c114 {background: #931639;}


/*--- Row 2 ---*/
.c21 {background: #F62954;}

.c22 {background: #F72C4C;}

.c23 {background: #F8387C;}

.c24 {background: #F64192;}

.c25 {background: #CD5DA3;}

.c26 {background: #CF529B;}

.c27 {background: #CD4795;}

.c28 {background: #BA7DB7;}

.c29 {background: #E3B1D6;}

.c210 {background: #E7C4DF;}

.c211 {background: #EFBBDA;}

.c212 {background: #FBBDD8;}

.c213 {background: #FDCFE0;}

.c214 {background: #FED9E5;}


/*--- Row 3 ---*/
.c31 {background: #FF6E2F;}

.c32 {background: #FF8F38;}

.c33 {background: #FFAA31;}

.c34 {background: #FDC612;}

.c35 {background: #FFCF0E;}

.c36 {background: #FFE800;}

.c37 {background: #FFF36C;}

.c38 {background: #FDF7F1;
    border-top:1px solid #EbEbEb;
    border-bottom:1px solid #EBEBEB;}

.c39 {background: #F6EEDB;}

.c310 {background: #EED9B9;}

.c311 {background: #E8CB98;}

.c312 {background: #D0A468;}

.c313 {background: #CE9F17;}

.c314 {background: #D4961B;}


/*--- Row 4 ---*/
.c41 {background: #A8E0F6;}

.c42 {background: #81CEC0;}

.c43 {background: #67CCE1;}

.c44 {background: #00BACF;}

.c45 {background: #00B5EB;}

.c46 {background: #009B9C;}

.c47 {background: #007884;}

.c48 {background: #255F25;}

.c49 {background: #4B7F2C;}

.c410 {background: #83C134;}

.c411 {background: #C5D929;}

.c412 {background: #B29F3B;}

.c413 {background: #998B28;}

.c414 {background: #7E6B2E;}


/*--- Row 5 ---*/
.c51 {background: #BDE4F8;}

.c52 {background: #C5D3DE;}

.c53 {background: #B0B1B2;}

.c54 {background: #1BBCEF;}

.c55 {background: #618ECC;}

.c56 {background: #768FA2;}

.c57 {background: #5579A6;}

.c58 {background: #045EAD;}

.c59 {background: #005FA8;}

.c510 {background: #4B4B4B;}



.c511 {background: #00448E;}

.c512 {background: #00456E;}

.c513 {background: #013A7A;}

.c514 {background: #242424;}




/*----- Envelopes -----*/
.envelopes, .oneEnv, .env {
  position:relative;
  margin:0 auto;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  width:100%;
  padding:.5em;
  justify-content: center;
}

.oneEnv {
  margin:-10em auto 3em;
  max-width:55%;
}

.env {
  width:100%;
  height:100%;
  margin:2em auto!important;
  align-items: center;
}





/*--- @Media Calls ---*/
@media screen and (max-width: 1280px) {
  .env {margin:3vw 2.2vw;}
  .oneEnv {margin-top:calc(-3em - 9vw);
    margin-bottom: calc(1em + 4vw);}
}

@media screen and (max-width: 1200px) {
  .colors {width:602px;}
}

@media screen and (max-width: 1080px) {
  .f-looks {width:90%;}
  .fontName-L img{
    padding:.5em calc(2vw + 2.5em) .5em;
    width:calc(12vw + 60%);}
}


@media screen and (min-width: 851px) {
  .intro1colBig {display:none;}
}
    
@media screen and (max-width: 850px) {
  .intro2column {display:none;}
  .intro1colBig {
    letter-spacing: 0;
    margin-top:calc(9vw - .4em);}
  .fontName-L img {
    padding:.3em calc(.5vw + .4em);
    width:calc(12vw + 55%);} 
  .colors {width:500px;}
  .f-looks {width:90%;}
  .swatch {
    margin-bottom:-5px;
    width:70px;
    height:70px;
    padding-top:32px;
    letter-spacing: .03em;
    line-height:1.2em;}
  .oneEnv {margin-top:calc(0em - 15vw);}

}

  h1:first-of-type {
              position:relative;
              margin-top:-35px;}
  h1:last-of-type {margin-bottom:.4em;}
}

  
@media screen and (max-width: 715px) {
  .fontName-L img {width:calc(12vw + 12em);} 
  .f-looks {width:100%;}
}
  
@media screen and (max-width: 640px) {
  .fontName-L img {
    width:calc(12vw + 70%);
    padding-bottom:1.4em;} 
  .f-looks {width:70%;}
}

@media screen and (max-width: 600px) {
  .envelopes {flex-wrap: wrap;}
  .oneEnv {margin-top:calc(-3em - 9vw);
  margin-bottom: calc(-3em -9vw);}
}

@media screen and (max-width: 520px) {
 .colors {width:350px;}
.swatch {
      margin-bottom:-5px;
      width:60px;
      height:70px;
      padding-top:32px;
      letter-spacing: .03em;
      line-height:1.2em;
      font-size:.45em!important;
      letter-spacing: .05em;}
}