@import url(https://fonts.googleapis.com/css?family=Electrolize);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('/shop/includes/header.css?v=2');
@import url('/shop/includes/footer.css?v=2');
@import url('slider.css');


.headerCenter {
	width: 100%;
}

/*text styles*/
.bigText {font-size:23px;font-weight:300;}
.smallText {font-size: 11pt;font-style: italic;}
.price {
    font-size: 28px;
    text-align: center;
    width: 100px;
}
.capsTitle {
    font-weight: 400;
    font-size: 10pt;
    font-family: "Montserrat",sans-serif;
    text-transform: uppercase;
    margin-top: 10px;
}
.mediumFont {font-size:18px;}
.puzzleData {
    padding: 10px;
}
.priceColumn {
    text-align: center;
}
/*basic alignments*/
.row {display: flex;align-items: center;}
.left {
    width: 50%;
    padding-right: 40px;
}
.right{width:50%;}
div {box-sizing: border-box;}
.center {max-width:1200px;margin: 0 auto;display:flex;justify-content:center;}

/*mobile*/
@media all and (max-width: 45em) {
	.horizontalNav {display:none;}
    .left,.left30,.right{width:100%;padding:0 10px;}
	.right70{width:100%;padding:0px;}
    .puzzleInfo{ flex-wrap:wrap;}
    .puzzleBanner {height:auto !important;}
    .pageCenter{height:auto !important;}
    .center {    display: flex;    flex-wrap: wrap;    flex-direction: column-reverse;}
    .mobileNav {display:flex;justify-content:center;}
    
    .pieceLabel {display:flex;flex-direction: column;align-items: center;}
    #whimsyCategories img {display:none;}
    .appMenu{font-size:7pt;}
    .appMenu i{font-size:16pt;}
    .infoChunk{width:100%;}
    .whimsy img {height:40px;}
    .row{    flex-wrap: wrap;}
    .pieceText {display:none;}
	.pieceStyle {flex-basis:33% !important;;}
	.pieceStyles{ flex-wrap:wrap;}
}
/*desktop*/
@media all and (min-width: 45em) {
	.mobileNav{display:none;}
    .left30 {width: 30%;padding-right: 40px;}
    .right70 {width: 70%;}
        
    .horizontalNav {display:flex;}
    /*piece style*/
    .pieceLabel {display: flex;}
    .pieceStyle {}
    
    /*whimsies*/
    #whimsyCategories img {display:inline-block;}
    .appMenu{font-size:16px;}
    .infoChunk{width:33.33%;}
    .whimsy img {height:40px;}
}




body {font-family: 'Lato', sans-serif;margin:0px;}


.hide {display:none;}
.clear {clear:both;}



.detailText {
  /*  padding: 20px;*/
    text-align: center;
  
}
.detailText img {max-height:200px;}



.centerBox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.centerColumn{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    
	/*margin:50px 0;*/
}
.horizontalNav {
   width: 120px;
    height: 100%;

    justify-content: center;
    align-items: center;
   
}

.absR{ right:0;}
.absL{left:0;}

.pageCenter {
    max-width: 1200px;
    width: 100%;
}
.container {
    display: flex;
    justify-content: center;
   
}

.container2 {
    display: flex;
    align-items: center;
}

.flexCenter {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.puzzleBanner {
background-image:url("images/puzzleApp_Banner.jpg");
height:432px;
background-size: cover;
color:#fff;
flex-direction: column;
}
.puzzleBanner2 { margin-bottom: 5px; border-top: 1px solid #666;display:none;}
.puzzleBanner2 .headerText {
    font-size: 18px;
    text-align: center;
    padding: 10px;
    text-shadow: 1px 1px 1px grey;
    font-family: Montserrat;
    color: #000;
}
.headerSubText {
    text-align: center;
}
.shippingText {
    background-color: #343772;
    padding: 5px;
    /* color: #000; */
    /* opacity: .8; */
    margin-top: 5px;
}
.appMenu{text-align:center;display:none;}
.appMenu div {
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
}
.appMenu div.enabled:hover {
    color: black;
    cursor: pointer;
}
.appMenu .sel { color: #000; background-color: #eee; border-radius: 10px; box-shadow: #666 2px 2px 2px;}

.puzzleBanner2 .appMenu {
    display: flex;
    align-content: center;
    color: #999;
}

.puzzleBanner .headerText {
    font-size: 38px;
    padding-top: 10%;
    text-align: center;
}
.puzzleInfo{
    display:flex;
    flex-grow:1;
    flex-shrink:1;
   
}
.infoChunk {margin:10px;}
.puzzleInfo img{width:100%;}
.puzzleText1 {
    margin: 20px 0;
    max-width: 800px;
}
.puzzleText2 {
    background-color: #eee;
    padding: 10px;
}
.puzzleText3 {
	margin: 20px 0;
    max-width: 800px;
	flex-direction: column;
    display: flex;
align-items: center;}

.puzzleDiagram img {
    width: 100%;
}
.h2 {
    font-size: 20px;
    font-weight: 300;
    background: bisque;
    padding: 10px;
}

.slideshow{display:flex;}
.slides{width:50%;}
.slideshow img {width:100%;}
.slideText{width:50%;margin:10px;}
.button {
    margin:10px;
    min-width:177px;
    font-size: 19px;
    padding: 8px;
    cursor: pointer;
    height: auto;
    border-radius: 8px;
    outline: 0;
    background-color: cornflowerblue;
    color: #000;
    text-align: center;
    display: inline-block;
    box-shadow: 2px 2px 10px #aaa;
    border-style: none;
}
 .button:hover {background-color:#ff0;color:#000;}
  /* for disabling the apps */
 .disabled {background-color: gray;}
 .disabled:hover{background-color:gray;cursor:auto;}
 
/*arrow navigation*/

.arrow:hover {
    color: cornflowerblue;
}

.arrow {
    font-size: 40px !important;
}

 .arrowButton{display:flex;align-items: center;cursor:pointer;flex-direction: column;}
 .arrowButtonMobile{margin:5px;cursor:pointer;}
.arrowText {
    padding: 5px;
    width: 70px;
    text-align: center;
    height: 70px;
}
 .arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;

  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid black;
}

.arrow-right:hover {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid cornflowerblue;
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-right:40px solid black;
}

.arrow-left:hover {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-right:40px solid cornflowerblue;
}


.arrowButtonMobile .arrowText {
    padding: 2px;
    text-align: center;
    display: flex;
    justify-content: center;
    height: auto;
    align-items: center;
}

/*end arrows*/

.whimsyImg{width:100%;}
#holder.hover { border: 10px dashed #0c0; }
#holder p { margin: 10px; font-size: 14px; }
progress { width: 100%; }
progress:after { content: '%'; }
.fail { background: #c00; padding: 2px; color: #fff; }
.hidden { display: none !important;}


/*upload page */
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-size: contain;
    top: 0;
    left: 0;
}
.overlay:hover{background-image:url(images/uploadArt_hover.png);background-size:contain;}
#holder {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;

}
#holder img {width: 100%;}
#holder .title1 {font-size:29px;}
#holder .title2 {font-size: 16px;text-transform:uppercase;}
.terms {
    color: #666;
    margin: 10px;
    font-size: 10pt;
}



/*size and shape page*/
.shape {  height: 50px;padding:5px;order:1;}
.shape:hover,.button2:hover {opacity: .7;cursor:pointer;}
.shape img {  height: 100%;}





div#shapes {
    display: flex;

}

div#resolutionWarning {
    padding: 10px;
    background-color: #ff0;
    margin: 10px 0;
}
div#resolutionWarning span {
    text-transform: uppercase;
    font-weight: 600;
    margin-right: 10px;
}

.button2 {
    background-color: black;
    color: #fff;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 14px;
    box-shadow: 2px 2px 5px #666;
	margin:5px;
}
#magicShape {order:0;}
#customShapeButton {order:5;}
#customButton {order:0;}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* WHIMSY PAGE */
#whimsyCanvas {filter: drop-shadow(2px 4px 6px black);}
.pieceIconSummary{width:60px;}
.pieceIconSummary img{width:100%;}
.whimsyPhoto {
    margin: 10px 0;
    padding: 0 60px;
}
#whimsies {
    margin-bottom: 8px;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: flex-start;
    background-color: #eaeaea;
    width:100%;
}

.whimsy {margin:5px;}
.whimsy:hover {cursor:pointer;}


.whimsy:hover > img {opacity:.5;}
 
.whimsyBrowser {display:flex;}

#whimsyCategories { display: flex; vertical-align: top;flex-direction: column;}
#whimsyCategories img {height: 30px;width: 30px;}
#whimsyCategories .title {display:inline-block;}
 .title { width: 100%; margin-bottom: 3px;}
.whimsyCategory {
    display: flex;
    padding: 4px;
    text-align: center;
    position: relative;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    align-items: center;
    box-shadow: -1px 1px 5px #ccc;
}
.whimsyCategory:hover{background-color:#eee;cursor:pointer;}
.catSel {background-color: #eaeaea;color: #000;}
.catSel:hover {background-color:#ccc;}


 .selected {  background: rgba(255,0,255, 0.5); }
 
 #whimsyMenu {
    background-color: bisque;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 #whimsyMenu .selectedNum {text-align:right;padding:5px;}

#whimsyLoad {display:none;}
 
.noWhimsies {
    padding: 20px;
    color: #aaa;
    font-size: 15pt;
    text-align: center;
    display: flex;
    align-items: center;
}
.selectedWhimsies {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.selectedWhimsies img {

    padding: 0;
    display: block;
}
.selectedWhimsies .whimsy {
    margin: 0px;
    padding: 6px;
    
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
.selectedWhimsies .whimsy > .name {
    font-size: 7pt;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 60px;
    font-family: 'Montserrat';
    text-transform: uppercase;
}




.closeMe {
width: 20px;
background-color: #ff0;
height: 20px;
opacity: 0;
position: absolute;
color: #000;
font-weight: 700px;
text-align: center;
box-shadow: 5px 5px 10px;
z-index:5;
}

#selectedWhimsies .whimsy:hover .closeMe {opacity: 1;}


.flash { 
	-webkit-animation: flashRed 2s;
	animation:flashRed 2s;
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
}
@-webkit-keyframes flashRed {
	0% {background-color:transparent;}
	25% {background-color:#f00;}
	50% {background-color:transparent;}
	75% {background-color:#f00;}
	100% {background-color:transparent;}
}	
/*popup box */
div#whimsyStart {    display: flex;    flex-direction: column;    justify-content: center;}
.popUpInside {    display: flex;    flex-direction: column;    justify-content: center;}
.popUp {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    justify-items: center;
    top: 0;
    left: 0;
    justify-content: center;
    background: rgba(40,40,40, .5);
}
.x {
    display: flex;
    flex-direction: row-reverse;
}
.x div:hover {
    color: cornflowerblue;
    cursor: pointer;
}

.x div {
    position:absolute;
}
.sectionHead {
    text-align: left;
    border-top: 1px solid #000;
    margin: 10px 0;
    text-transform: uppercase;
    font-size: 12pt;
}

/* custom shape pop up*/
.shapePreview {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
#customShapeImage {
    max-width: 50%;
    max-height:500px;
}
/*  */



 /*PIECE STYLE*/
 .pieceDensity {
    text-align: center;
}
.pieceStyles {
    display: flex;
    justify-content: center;
}
.pieceImage img {
    width: 100%;
}
.pieceText {
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    padding: 10px;
}
.pieceLabel {
    
    justify-content: space-between;
    margin-bottom: 10px;
}
.pieceStyle {
    flex-basis:200px;
    border: 1px solid #fff;
   
}
.pieceIcon img {
	width:90px;
}
.pieceStyle:hover,.pieceStyleSel:hover {border:1px solid #ccc;}
.pieceStyleSel {
    border: 1px solid #000;
}
.pieceName {
   
    display: flex;
    align-items: flex-end;
}

/*ORDER PAGE*/
input[type="text"] {
    background-color: E6E6E6;
    border-bottom: 1px solid #ccc;
    font-size: 13px;
    font-weight: 300;
    font-family: Lato, sans-serif;
    padding: 5px;
    border-width: 0 0 1px 0;
    width: 100%;
    margin: 5px 0;
}
input[type="text"]:hover {
    background-color:fff;
    border-bottom: 1px solid #000;


}
#puzzlePreviewImage img {
    max-width: 100%;
	max-height: 750px;
	filter: drop-shadow(2px 4px 6px black);
}

.yourWhimsies {
    display: flex;
    background-color: #eee;
    flex-wrap: wrap;
}
.yourWhimsies .whimsy .name {
    display: none;
}

/* stage 2 cropping page*/
.slider {
    margin: 10px 0;
}
.sliderSet {
    align-items: center;
    width: 100%;
    justify-content: center;
   
}
.arrow-left_slider {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right:10px solid black;
}
.sliderSet .data {
    text-align: center;
    padding: 5px;
    width: 100%;
}
.controlGroup {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* background-color: #ddd; */
}
.controlGroup .title1 {
    font-size: 13pt;
    font-weight: 300;
    width: 100%;
    border-bottom: 1px solid #666;
    margin-bottom: 10px;
    padding: 8px;
    /* background-color: #666; */
    color: #666;
}
.controlSet {
    padding: 10px;
    display: flex;
}
.controlSet .title2 {
    text-transform: uppercase;
    font-weight: 600;
}
.controlSet .data {text-align:right;}
.controls {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

table.puzzleSizeData {
    border-collapse: collapse;
    width: 100%;
}
table.puzzleSizeData td {
    border-bottom: 1px solid #ccc;
    font-variant: small-caps;
    padding: 5px;
}
/*progress bar for add to cart */
#progress {
    width: 240px;
    border-radius: 10px;
    height: 15px;
    background: #FFF none;
    box-shadow: 1px 1px 0 #666;
    display: flex;
    margin: 10px 0;
}
#progressBar {
height: 100%;
background: cornflowerblue;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}

.saveMessage	{padding:23px;font-size:16px;}
.saveMessage span {font-variant:small-caps;text-transform:none;font-size:16px;}
.alert {z-index:2;text-align:center;background-color:#ffff00;opacity:.8;color:#000;position:absolute;top:0px;left:0px;height:160px;width:500px;opacity:.7;display:none;}
.messageBox {
    width: 400px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -200px;
    box-shadow: 10px 10px 10px #666;
    border-radius: 10px;
    padding: 10px;
    background-color: #091492;
    opacity: 1;
    color: #fff;
    display:block;
}