@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

@-ms-viewport{
	width: device-width;
}

*{
	margin: 0;
	padding: 0;
}

.bullet:last-of-type{
	display: none;
}

#loading{
	width: 100vw;
	height: 100vh;
	background: #003533;
	position: absolute;
	top:0px;
	left:0px;
	color: #fff;
	z-index: 9999999999;
	
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	font-size: 1vw;
	font-family: "Lato", "Arial", sans-serif;
	font-weight: 700;
}

body{
	background: #003533;
	width: 100vw;
	height: 100vh;
}

#wrap{
	position: absolute;
    width: 100vw;
    height: 100vh;
}

#bgLayer{
	width: 100%; height: 100%;
	background-image: url('img/bg-2.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom right;
	/*opacity: 0.3;*/
	position: absolute;
	top: 0; left: 0;
}

#container{
	height: 100%;
	width: 100%;
	margin: auto;
	position: absolute;
	
	overflow: hidden;
}

#stepMenu{
	width: 10%; /* 9.5% */
	height: 90%;
	position: absolute;
	z-index: 999999;
	/*background: rgba(255,255,255,0.5);*/
	background: #003533;
	
	position: absolute;
	top: 5%;
	left: 0px;
	
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-evenly;
}

#stepText{
	font-size: 1.5vw;
	text-align: center;
	user-select: none;
	color: #308E6A;
	font-family: "Lato", "Arial", sans-serif;
	font-weight: 700;
}

.btnWrap{
	width: 64%;
	text-align: center;
	color: #fff;
	font-family: "Lato", "Arial", sans-serif;
	font-size: 1.25vw;
	font-weight: 700;
}

.btnWrap:hover{
	color: #b12c2d;
}

.stepBtn,
.zoomBtn{
	font-family: "Lucida Sans Unicode";
	font-size: 4vw;
	cursor: pointer;
	/*width: 64%;*/
	/*border-radius: 100%;*/
	color: #fff;
	text-align: center;
	user-select: none;
	margin-bottom: 5px;
}
.stepBtn > span,
.zoomBtn > span{
	display: block;
	margin-left: 5%;
	padding-bottom: 5%;
	
	visibility: hidden; /* just use images instead of unicode */
}

#zoomInBtn{
	background:url('img/zoom-in.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: center;
}
#zoomOutBtn{
	background:url('img/zoom-out.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: center;
}

#stepPrev{
	background: url('img/green-ornament.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: center;
}

#stepNext{
	background: url('img/white-ornament.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: center;
	color: #003533;
}

#stepReset{
	background: url('img/red-ornament.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: center;
}

#hider{
	width: 100%;
	height: 100%;
	/*background: rgba(0,0,0,0.69);*/
	position: absolute;
	z-index: 99999;
	display: block;
}

#cropArea{
	width: 700px;
	height: 700px;
	border: 5px solid #b12c2d;
	position: absolute;
	/*left: 50%;
	margin-left: -350px;
	top: 50%;
	margin-top: -350px;*/
	z-index: 5;
	pointer-events: none;
}
#mobileDeadzone{
	display: none;
}

#uploadedImg{
	width: auto;
	max-height: 100%;
	margin: auto;
	display: block;
}

#windowWrap{
	width: 80%;
	height: 90%;
	position: absolute;
	top: 5%;
	left: 10%;
	z-index: 25;
}

.windowContent{
	position: absolute;
	width: 95%;
	height: 100%;
	background: #F6F6F6;
	padding-left: 2.5%;
	padding-right: 2.5%;
	display: none;
	font-size: 2vh;
	border-radius: 0px 1vw 1vw 0px;
	font-family: "Lato", "Arial", sans-serif;
}

.windowFlex{
	display: flex;
	justify-content: left; /* space-between ~ unset textBlock maxwidth to fill windows */
	align-items: center;
	flex-direction: row;
	
	height: 100%;
	width: 100%;
}

.windowContent h1{
	color: #A73A27;
	font-weight: 900;
}
.windowContent ol{
	padding-left: 1.5%;
}
.windowContent li{
	color: #a73a27;
}
.windowContent li > span{
	color: #308E6A;
}

#window0{
	display: block;
	background: #fff;
}

#window1 > p{
	margin-bottom: 1%;
}
#window1 > h1{
	margin-top: 1%;
}

#window2 > .windowFlex{
	flex-direction: column;
	justify-content: space-evenly;
}
#window2 > .windowFlex > p{
	text-align: center;
}

#window3{
	width: auto;
	height: 100%;
	margin: auto;
	position: relative;
	z-index: 30;
	display: none;
	background: #222;
	
	overflow: hidden;
}

#window3Flex{
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	justify-content: center;
	align-items: center;
}

#window3Info{
	position: absolute;
	height: 90%;
	top: 5%;
	width: 80%;
	left: 10%;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	z-index: 999;
	font-family: "Lato", "Arial", sans-serif;
}
#window3InfoText{
	width: 50%;
	height: 70%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	font-size: 2vh;
}
#window3InfoText > h1{
	width: 100%;
	color: #A73A27;
	font-weight: 900;
}
#winow3InfoText > p{
	width: 80%;
}
#window3Close{
	width: 75%;
	background: #308E6A;
	margin-top: 2%;
	border-radius: 1.5vw;
	text-align: center;
	padding-bottom: 3%;
	padding-top: 3%;
	color: #fff;
	position: relative;
	font-size: 1.2vw;
}

#window3Close:hover{
	box-shadow: 0px 5px 0px rgba(25,25,25,0.75);
	position: relative;
	top: -5px;
	cursor: pointer;
}

#zoomWrap{
	height: 90%;
    width: 10%;
    position: absolute;
    top: 5%;
    right: 0;
    background: #003533;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    color: #fff;
}

#zoomInWrap > span,
#zoomOutWrap > span{
	font-size: 1.05vw !important;
}

#window4 > .windowFlex{
	/*flex-direction: column;
    justify-content: center;
    width: 50%;
    margin: auto;
	
	align-items: inherit;*/
	flex-direction: column;
	justify-content: space-between;
	width: 80%;
	margin: auto;
	align-items: inherit;
	height: 75%;
	top: 15%;
	position: relative;
}

#window4 > .windowFlex > div{
	font-weight: 700;
}

#window5 > .windowFlex{
	flex-direction: column;
	justify-content: space-between;
	width: 80%;
	height: 75%;
	margin: auto;
	align-items: inherit;
	top: 15%;
	position: relative;
}

#window5 > .windowFlex > p{
	margin-top: 1%;
	margin-bottom: 1%;
	width: 60%;
}

#finalizeContent{
	width: 100%;
	height: 80%;
	display: flex;
}

#previewImg{
	/*max-width: 45%;*/
	max-height: 100%;
	width: auto;
}

#finalizeButtons{
	width: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
}

.finalBtn{
	width: 75%;
	background: #308E6A;
	margin-top: 2%;
	border-radius: 1.5vw;
	text-align: center;
	padding-bottom: 3%;
	padding-top: 3%;
	color: #fff;
	position: relative;
	font-size: 1.2vw;
	font-size: 700;
}

.finalBtn:hover{
	box-shadow: 0px 5px 0px rgba(25,25,25,0.75);
	position: relative;
	top: -5px;
	cursor: pointer;
}

#instagramBtn{
	display: none;
}

#photoDetails{
	width: 60%;
}

#photoDetails tr > td > span{
	color:#308E6A;
	font-size: 1vw;
}
#photoDetails tr > td > input{
	max-width: 100%; /* fit td */
	width: 80%;
	height: 80%;
	font-size: 1.2vw;
	border: none;
	padding: 1%;
}

#photoDetails tr > td{
	width: 35%;
	min-height: 15px;
	height: 1.75vw;
}

#photoDetails tr > td:first-of-type {
	width: 65%;
}

.windowMotif{
	width: 20%;
	height: 20%;
	position: absolute;
	bottom: 1vw;
	right: 1vw;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: contain;
}
#window0Motif{
	background-image: url('img/holly-motif.png');
}

.windowLeftImg{
	max-height: 100%;
	position: relative;
	float: left;
	left: -2.65%;
}

.textBlock{
	font-family: "Lato", "Arial", sans-serif;
	max-width: 60%;
}
.textBlock > *{
	margin-bottom: 1%;
}

#compliments{
	width: 100%;
	height: auto;
}
#complimentsLogo{
	max-width: 25%;
	margin-top: 1vw;
}

#backgroundsContainer{
	width: 100%;
	height: 100%;
	max-height: 85%;
	position: relative;
	
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	
	overflow-y: auto;
}

.bgThumb, .bgThumbDummy{
	width: 32%;
	margin-bottom: 1.5%;
	cursor: pointer;
}

#uploadBox{
	max-width: 50%;
	max-height: 50%;
	cursor: pointer;
}

#uploadInput{
	display: none;
}

#swatchesWrap{
	width: 100%;
	height: auto;
	
	display: flex; /* hide at start; flex */
	align-items: center;
	flex-direction: row;
	justify-content: left;
	margin-top: 1%;
}

.swatch{
	width: 4vw;
	height: 4vw;
	/*border: 1px solid black;*/
	margin-right: 2%;
	border-radius: 100%;
	color: #fff;
	cursor: pointer;
}

.swatch:hover{
	box-shadow: 0px 5px 0px rgba(25,25,25,0.75);
	position: relative;
	top: -5px;
}

#swatch-red{ background-color: #b12c2d; }
#swatch-white{ background-color: #fff; border: 1px solid #333; box-sizing: border-box; }
#swatch-black{ background-color: #121010; }
#swatch-green{ background-color: #308e6a; }
#swatch-gold{ background-color: #e5b14f; }

.selected{
	background-image:url('img/check-white.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#swatch-white.selected{
	background-image:url('img/check-black.png');
}

.selected:after{
	/*content: '✓';
	
	font-size: 2.5vw;
	
	display: flex;
	justify-content: center;
	align-items: center;*/
}

#previewBtn,
#submitNamesBtn{
	width: 15%;
	height: 7%;
	margin: auto;
	margin-top: 10px;
	background: red;
	color: #fff;
	text-align: center;
	font-size: 1vw;
}

#previewUpload{
	max-height: 50%;
	width: auto;
}

#imageContainer{
	width: auto;
	height: 90%; /* 100% */
	top: 5%; /* 0 */
	margin: auto;
	display: block;
	visibility: hidden;
	position: relative;
}

#background{
	width: auto;
	height: 100%;
	
	margin: auto;
	display: block;
}

#innerFrameWrap{
	width: 37.5vh; /* 41.5vh */
	height: 41.60%; /* 699px; */
	position: absolute;
	top: 31.9%;
	left: 25.05%;
	/*background: rgba(255,0,0,1);*/
}

#innerFrame{
	width: 100%;
	height: 100%;
}

#innerFrameImg{
	max-width: 100%;
	max-height: 100%;
}

#logoWrap{
	width: 27.11%;
	height: 14.88%;
	/*background: rgba(0,0,255,0.5);*/
	position: absolute;
	top: 5%;
	left: 27%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#logo{
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

#detailsWrap{
	width: 42.22%;
	height: 15.47%;
	/*background: rgba(255,255,255,0.5);*/
	position: absolute;
	left: 19.5%;
	top: 83%;
	text-shadow: 1px 1px 1px #000;
	
	text-align: center;
	
	font-family: "Lato", "Arial", sans-serif;
}

#detailsWrap > span{
	height: 100%;
	width: 100%;
}

/* export image */
#imageContainerExport{
	width: 2250px;
	height: 1679px;
	display: block;
	visibility: hidden;
	position: absolute;
	top:0; left:0;
	z-index: 1;
}

#logoWrapExport{
	width: 27.11%;
	height: 14.88%;
	/*background: rgba(0,0,255,0.5);*/
	position: absolute;
	top: 5%;
	left: 27%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#logoExport{
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

#innerFrameWrapExport{
	width: 700px;
	height: 700px;
	position: absolute;
	top: 31.9%;
	left: 25.05%;
	/*background: rgba(255,0,0,1);*/
}

#innerFrameExport{
	width: 100%;
	height: 100%;
}

#innerFrameImgExport{
	/*max-width: 100%;
	max-height: 100%;*/
	width: 100%;
	height: 100%;
}

#detailsWrapExport{
	width: 42.22%;
	height: 15.47%;
	/*background: rgba(255,255,255,0.5);*/
	position: absolute;
	left: 19.5%;
	top: 83%;
	text-shadow: 1px 1px 1px #000;
	
	text-align: center;
	
	font-family: "Lato", "Arial", sans-serif;
}

#detailsWrapExport > span{
	height: 100%;
	width: 100%;
}

#backgroundExport{
	width: auto;
	height: 100%;
	
	margin: auto;
	display: block;
}

#imageNote{
	display: none;
}

/* --------------------------------------- Portrait fixes ------------------------------------------- */

@media screen and (max-width:768px) and (orientation:portrait) {
	
* {
}

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}
h1{
	font-size: 7vw;
}

#bgLayer{
	background-image: url('img/bg-solid.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom right;
}

#imageNote{
	position: absolute;
	color: #fff;
	display: block;
	width: 90%;
	left: 5%;
	text-align: center;
	font-size: 5vw;
	top: 50%;
	font-family: "Lato", "Arial", sans-serif;
	font-weight: 700;
}

#loading{
	font-size: 4vw;
}

#stepMenu{
	width: 100%;
	height: 15%;
	top: inherit;
	left: 0px;
	bottom: 0px;
	
	flex-direction: row;
}
#nextWrap{
	order: 3;
}
#resetWrap{
	order: 2;
}
#prevWrap{
	order: 1;
}
#stepText{ display: none; }
.stepBtn{
	font-size: 10vw;
}
.btnWrap > span{
	font-size: 4vw;
}

#windowWrap{
	height: 83%;
	top: 2%;
	left: 5%;
	width: 90%;
}
.windowMotif{ display: none; }
.windowContent{
	border-radius: 2vw 2vw 0vw 0vw;
}
#window0 > .windowFlex {
	flex-direction: column;
	overflow: hidden;
}
.windowLeftImg{
	order: 5;
	max-width: 100%;
	left: 0px;
	float: none;
}
#window0 .textBlock{
	max-width: 90%;
}
#window0 .textBlock > *,
#window0 .textBlock li{
	margin-top: 2%;
}
#window0 .textBlock > p:first-of-type{
	display: none;
}
#compliments{ display: none; }

#window1 > h1,
#window1 > p{
	margin-top: 2%;
	margin-bottom: 2%;
}
#backgroundsContainer{
	margin-top: 2%;
}
.bgThumb{
	width: 100%;
	margin-top: 1%;
	margin-bottom: 1%;
}

#imageContainer{
	width: 100%;
	height: auto;
}

#background{
	width: 100%;
	height: auto;
}
#logoWrap{
	width: 25%;
	height: 20.5%;
	top: 2%;
	left: 28%;
}
#logo{
	max-width: 90%;
	max-height: 90%;
}
#innerFrameWrap{
	width: 37.5vw;
}

#uploadBox{
	max-width: 100%;
	max-height: 50%;
}
#zoomWrap{
	height: 10%;
	width: 100%;
	position: absolute;
	top: 0%;
	right: 0;
	background: #003533;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-evenly;
	color: #fff;
}
#zoomInWrap > span,
#zoomOutWrap > span {
    font-size: 4vw !important;
}
#window3{ }
#cropArea{
	width: 100vw;
	height: 100vw;
	border: 5px solid #b12c2d;
	position: absolute;
	z-index: 5;
	pointer-events: none;
	box-sizing: border-box;
	top: 10%;
	margin: 0;
	left: 0;
}
#mobileDeadzone{
	display: block;
	background:rgba(20,20,20,0.75);
	width: 100vw;
	height: 100vw;
	position: absolute;
	top: calc(10% + 100vw);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15vw;
	color: #fff;
	user-select: none;
}
.spacer{
	display: none;
}
#window3Flex{
	align-items: flex-start;
}

#photoDetails{
	width: 100%;
}
#photoDetails tr > td > span{
	font-size: 4vw;
	font-weight: 700;
}
#photoDetails tr > td > input{
	height: 100%;
	font-size: 5vw;
}
#photoDetails tr > td {
    min-height: 20px;
    height: 7vw;
}

#window4 > .windowFlex{
	height: 85%;
	top: 5%;
	width: 95%;
}

#swatchesWrap{
	width: 100%;
}
.swatch{
	width: 10vw;
	height: 10vw;
	margin-right: 5%;
}

#window5 > .windowFlex {
    height: 95%;
    top: 5%;
	width: 95%;
}
#window5 > .windowFlex > p{
	width: 100%;
}
#finalizeContent{
	width: 110%;
	height: 80%;
	display: flex;
	flex-direction: column;
	margin-left: -5%;
	align-items: center;
}
#previewImg{
	max-height: 50%;
    max-width: 100%;
}
.finalBtn{
	font-size: 3vw;
	border-radius: 3vw;
}
#instagramBtn{
	display: block;
}

} /* end portrait general query */

/* --------------------------------------- Landscape fixes ---------------------------------------------- */

@media screen and (max-height:700px) and (orientation:landscape) {
	
#cropArea{
	width: 100vh;
	height: 100vh;
	border: 5px solid #b12c2d;
	position: absolute;
	z-index: 5;
	pointer-events: none;
	box-sizing: border-box;
	top: 0;
	margin: 0;
	left: 24%;
}

#mobileDeadzone{
	display: block;
	background:rgba(20,20,20,0.75);
	width: 100vw;
	height: 100vw;
	position: absolute;
	top: calc(10% + 100vw);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15vw;
	color: #fff;
	user-select: none;
}
	
} /* end landscape general query */

@media screen and (max-height: 500px) and (orientation:landscape) {
	
#instagramBtn{
	display: block;
}

}

@media screen and (min-width:481px) and (max-width:768px) and (orientation:portrait) {
/* ipad portrait */
.stepBtn{
	font-size: 7vw;
}
#imageNote{
	top: 65%;
	font-size: 3vw;
}
#zoomInWrap > span,
#zoomOutWrap > span{
	font-size: 2vw !important;
}
#mobileDeadzone{
	display: none;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* ipad landscape */
#finalizeContent{
	width: 103%;
}
.finalBtn{
	width: 90%;
	background: #308E6A;
	margin-top: 2%;
	border-radius: 1.5vw;
	text-align: center;
	padding-bottom: 3%;
	padding-top: 3%;
	color: #fff;
	position: relative;
	font-size: 1.2vw;
	font-size: 700;
}
#mobileDeadzone{
	display: none;
}
}