/*  ----- Begin Design FONTS ----- */
.dTitle, .dTitle2, .credits {
    display:-webkit-inline-box;
    display: -moz-inline-flex;
    display:-ms-inline-flexbox;
    display:inline-flex;
    font:500 1.25em "Raleway", "Open Sans", Verdana, sans-serif;
    color: #D17811; 
    text-align: left;
	letter-spacing: .05em;
	word-spacing: .1em;
    padding:.5em 0 .25em 2.5em;
    -webkit-font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
}

.dTitle span, .dTitle2 span {
  font-weight: 300;
  font-size:.70em;
  color:#999;
  padding:.2em .5em;
  margin-top:.2em;
}

.dTitle2 {padding:0 .5em 0 0;
  margin-left:5em;
  background:#fdf9f2;
}

.design, .designArt {
  position: relative;
  display: -moz-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -moz-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 93.75%;
  margin:0 auto;
  padding-bottom:10em;
  -webkit-box-align: center;
     -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.cover {
  margin-right:1.5em;
}

.back {
  margin-left:1.5em;
}

.coverF {
  margin-right:2em;
}

.backF {
  margin-left:2em;
}

.credits {
  width:35%;
  font-size:.65em;
  letter-spacing: .075em;
  word-spacing: .1em;
  color: #ccc;
  text-align: center; 
  white-space: nowrap!important;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  top:37%;
  left:-2.5%;
  margin:.5%;
  padding-right:1.5em;
  z-index: 10;
}

.credits span {
  color:#999;
}

.dcell {
  font:200 1em "Raleway", Verdana, sans-serif;
  color: #ccc;
  letter-spacing: .05em;
  text-align: center;
}

sup {
  position: relative;
  font:200 .7em "Raleway", "Open Sans", Verdana, sans-serif;
   top:-.35em;
}

.studentNames {
    position: relative;
    margin:-4em auto .5em;
    width:50%;
    font:400 .9em "Montserrat", Verdana, sans-serif;
	color: #999;
	letter-spacing: .02em;
    word-break: keep-all;
    word-wrap: normal;
    text-align: center;
    background:none;
    flex-wrap: nowrap;
}

.artLinks {
    margin:3em auto -2em;
    text-align: center;
    font:300 .95em "Raleway", Verdana, sans-serif;
}

.artLinks a:link {
    line-height:2em;
	color: #F00;
	letter-spacing: .05em;
    word-break: keep-all;
    word-wrap: normal;
    text-align: center;
}

.artLinks a:hover {
  font-weight:500;
}


/*  ----- Begin Modal Popup "Options" ----- */
.dModal {
    margin:0 auto;
    font-weight:300;
	text-align: center;
	letter-spacing: .1em;
    cursor: pointer;
    -webkit-transition:all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

a.dModal {
  text-decoration: none;
  color: #F00;
  font-size: 1.1em;
  letter-spacing: .05em;
}

.dModal:hover {
  font-weight:600;
    letter-spacing: .02em!important;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-transition:opacity 500ms;
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
  z-index: 100;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

.modal {
    top:50%;
    left:50%;
    width:500px;
    -webkit-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
    font:400 1em "Montserrat", Verdana, sans-serif;
    color: #4c4c4c;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    -webkit-transition:all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
  justify-content: flex-start!important;
}

.modalTop {
    position: relative;
    width:100%;
    height: 1.5em;
    font:200 2.25em "Montserrat", Verdana, sans-serif;
    color: #fff; 
    text-align: left;
    vertical-align: middle!important;
	letter-spacing: .05em;
    word-spacing: .15em;
    background-color: #ccc;
    padding-left:.85em;
    padding-top:.2em;
    border-radius: 5px 5px 0 0;
    -webkit-font-feature-settings: "lnum"!important;
    -moz-font-feature-settings: "lnum"!important;
    font-feature-settings: "lnum"!important;
}

.modal .close {
    position: relative;
    top:-.365em;
    right: 3%;
    -webkit-transition:all 200ms;
    transition: all 200ms;
    font-size:2em;
    font-weight: 100;
    text-decoration: none;
    color: #999;
    float:right;
    margin-bottom:-1.5em;
}

.modal .close:hover {color: #f00;}

.modal .content {
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:flex;
    -ms-flex-pack: distribute;
    justify-content: flex-start!important;
    margin:.25em 0 1.75em;
}

.content p, .bottom {
    font:400 80%/100% "Montserrat", Verdana, sans-serif;
    margin-bottom: -2.25em;
    color:#000;
    line-height:1.35em;
}


.left, .right {
    -moz-flex:0 1 auto;
    -webkit-box-flex:0;
     -ms-flex:0 1 auto;
         flex:0 1 auto;
   white-space: nowrap;
}

.left {
    width:26%;
    margin-left:1em;
    padding-right:.6em;
    text-align: right;
}

.left p{
    text-align: right;
    color:#999;
}

.dark{color:#666;}

.right {
    width:65%!important;
    text-align: left;
}

.right p, .bottom p{
    text-align: left;
    font-weight:400;
}

.right p::before {
  color: #f00;
  font-size:1.2em;
  font-weight:600;
  line-height: 1em;
  padding-right:.4em;
  content: "-";
}

.bottom {
  margin:-10px auto 18px;
  width:460px!important;
  padding:0 20px!important;
  font-size:.75em;
  line-height:1.5em;
  text-align:justify;
  color:#B2B2B2;
}

.center {margin:0 auto;
  text-align:center!important;}

.content .red {color: #F00;}

/*

.content ul {
    list-style: none;
    padding-top:0;}

.content ul li:before {
    content:"• "; font-size:1.2em;
    color:#f00;
    padding-right:.5em;}
*/

.greetings {
  margin:.9em 0 -1.2em 2.25em;
  color:#999;
  font-size:.75em;
  letter-spacing:.03em;
  line-height:1.25em;
}

p.greet {margin-top:2em;}
p.greet1 {margin-top:.9em;}
p.greet3 {margin-top:2.6em;}
p.bob, p.bob3 {margin:-2.9em;}
p.bob2 {display:none;}

.noSpan, .line2 {padding-left: 12px;}
.noSpan2 {padding-left: 0px;}
br.noBreak2 {display:none;}

.bold {font-weight:600;}

/* ----- End Modal/Popup Box ----- */


/* ----- Misc for Art, Etc. ----- */


.ingredients {
  margin:-.6em 6.25em -.5em;
  width:73%;
  border-top: 1px solid #D17811;
}
.ingredients p {
    font: 400 80% "Montserrat", Verdana, sans-serif;
    line-height:1.8em;
    color:#D17811;
    text-align: justify;
    word-spacing: .05em;
    letter-spacing: .01em;
    margin-top:-.75em;
    width:55%;
}

.margTop {margin:-2em auto -1em;}

/* ----- END Misc ----- */




/* ----- BEGIN DESIGNS ----- */
.dcell img {
  margin-top:.5em;
  max-width:100%!important;
  max-height:100%;
  image-rendering: auto;
}

.stacked {
  flex-wrap:wrap;
  -webkit-justify-content: center;
     -moz-justify-content: center;
          justify-content: center;
  text-align: center!important;
}

.wrap {
  flex:0 1 auto;
  padding-bottom: 1em;
  text-align: center;
  max-width: 100%;
}


.dc25, .dc5, .dc50, .dc10, .dc7  {
  -webkit-flex:0 1 auto;
     -moz-flex:0 1 auto;
      -ms-flex:0 1 auto;
          flex:0 1 auto;
  vertical-align:middle;
}
 
.dc25 {
  width:24%;
}

.dc3-9 {
  width:25%;
}

.dc36 {
  width:36.21%;  
} 

.dc5 {
  width:32.08%;  
} 

.dc5-5 {
  width:35.125%;  
} 

.dc50 {
    width:50%;
} 

.dc66 {
  margin:0 auto 5% auto;
  width: 67.5%;
}

.dc7 {
  width:44.75%;
}

.dc8 {
  width:50.08%
}

.dc9 {
  width: 59.17%;
}

.dc10 {
  width:63.94%
}

.dc11 {
  width:70.25%
}

.dc14 {
  width:89.33%;
} 

.dc75 {
  width: 75%;
}

.dc85 {
  width:56.7%;
}

.dc66 {
  width:66.67%;
}


img{
    text-align: center;
}

.b-sqr, .b-rnd  {
    border: 1px Solid #d4d4d4;
    box-shadow: 8px 8px 7px rgba(121, 94, 64, .15);
}

.b-sqr-E {
    border: none;
    box-shadow: none;
}

.drk  {
    border: 1px Solid #e5e5e5;
    box-shadow: 8px 8px 7px rgba(121, 94, 64, .20);
}

.border-lt  {
    border: 1px Solid #eee;
} 

.b-rnd  {
    border-radius: 1.5625em;
}

.border {
    border: 1px solid #999;
}

/* ----- END Designs Layout ----- */


/* ----- Media Calls for Designs ----- */
@media screen and (max-width: 1280px) {
  .dTitle, .dTitle2 {font-size:calc(.75em + .65vw);
          padding:.5em 0 .25vw 3.5vw;
  } 
  .dTitle2 {padding:0 .5em 0 0;
        margin-left:calc(1.65em + 4.25vw);}
  .ingredients {margin-left:calc(1.25em + 5.5vw);}
  .ingredients p {width:calc(54.75em - 14vw);}

  .cover {margin-right:calc(.4em + .9vw);}
  .back {margin-left:calc(.4em + .9vw);}
  .design {padding-bottom:12.5vw;}
  .designArt {padding-bottom:calc(15vw - 2em);}
  .dcell {font-size:calc(.5em + .75vw);}
  .dcell img {margin-top:calc(.125em + .125vw);}
  .credits {width:30vw;
            font-size:calc(.25em + .5vw);
            top:calc(10% + 12vw);  }
  .b-sqr, .b-rnd  {
    box-shadow: calc(3px + .4vw) calc(3px + .4vw) calc(2px + .3vw) rgba(121, 94, 64, .15);
  }
  .b-rnd  {border-radius: calc(.25em + 2vw);}
  .wrap {padding-bottom: calc(.2em + .8vw)!important;}
  .studentNames {font-size:calc(.75em + .3vw);
        margin-top:calc(1em - 5vw);}
  .artFold {width:65vw;}
}

@media screen and (max-width: 940px) {
  .artFold-B {width:35vw!important;}
  .artLinks { margin-top:calc(.8em + 6vw);}
  .artLinks a {line-height:calc(3em - 1.5vw);}
  .margTop {margin:calc(-2em auto -1em);
  line-height:calc(.5em + 2.5vw);}
}

@media screen and (max-width: 850px) {
  .dTitle2, .ingredients {margin-left:10vw;}
  .ingredients {width:calc(100% - 20vw);}
  .ingredients p {width:100%;
            font-size:calc(.5em + .5vw);}
  .credits {width:30vw;
            font-size:calc(.3em + .5vw)!important;
            top:calc(35% + 8vw)!important;  }
  .wrap {padding-bottom: 1.5em;}
  .coverF {margin-right:calc(.6em + 1.2vw);}
  .backF {margin-left:calc(.6em + 1.2vw);}
  .studentNames {font-size:calc(.65em + .3vw);}
  .artFold-B {width:35vw!important;}
  .artFold {width:60vw;}
  .artLinks { margin-top:calc(.4em + 4vw);}
  .artLinks a {font-size:calc(.55em + 1vw);}
  .smFont {font-size:calc(.5em + .9vw);
  line-height:calc(.75em + 2vw)!important;}
  .margTop {margin-top:calc(-1em + 6vw);}
}


@media screen and (max-width: 500px) {
  .modal {width:90vw;}
  .modalTop {font-size: calc(1.5em + 1.5vw);}
  .content p, .bottom {font-size:70%;
              margin-bottom:calc(1vw - 2.5em);}
  .bottom {width:85vw!important;
    margin-bottom:2em;}
  .modal .content {margin-top:.25em;}
  .credits {display:none!important;}
  .dTitle, .dTitle2 {	letter-spacing: .0em;
	word-spacing: 0em;
    font-size:calc(.7em + .65vw);}
  .greetings {font-size:60%;
    margin-top:1.1em;
    margin-bottom:-1.5em;}
  p.greet {margin-top:1.75em;
            display:block;}
  .artLinks a {font-weight:500;
        font-size:calc(.55em + 1vw);}
  .nbsp {font-size:calc(.25em + 1vw);}
  .margTop {margin-top:calc(2em + 4vw);}
}



@media screen and (max-width: 450px) {
  .left br {margin-top:1.3em;}
  .line2, .noSpan, .noSpan2 {padding-left: 9px;}
  .content p, .bottom {font-size:65%;}
  br.noBreak, br.noBreak2 {display:block;}
    br.break2, br.break3 {margin-top:-.25em;}
  .greetings {margin:.8em 0 -.75em 2.25em;}
    p.greet {margin-top:2.4em;}
    p.greet1 {margin-top:1.15em;}
    p.greet3 {margin-top:2.6em;}
  p.bob, p.bob3 {margin:-3.15em;}
  p.bob2 {margin-top:1.5em;}
}



@media screen and (max-height: 400px) {
  .modal {width:70vw;}
  .content p, .bottom {
    font-size:65%!important;
    padding: 1.4em 0;}
  .modal .content {margin:0em 0 1.2em;}
  .bottom {
    margin:-15px auto 12px;
    line-height:1.35em;}
  .bottom {width:63vw!important;}
  .greetings {
    margin:.9em 0 -.75em 2.25em;
    font-size:60%;}
  p.greet {margin-top:2.4em;}
  p.greet1 {margin-top:1.3em;}
  p.greet3 {margin-top:2.6em;}
  br.noBreak, br.noBreak2 {display:none!important;}
  .noSpan, .noSpan2 {padding-left: 0px!important;}
  .line2 {padding-left: 9px;}
  p.bob2 {display:none;}
  p.bob3 {margin:1em;}
}