.dbody {
  margin:0 auto;
  text-align:center;
  font-family:Verdana, Sans-Serif;
  background-color:#FFFFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #000000;
  font-size:14px;
}

.dbody #menubar1, 
.dbody #printhead, 
.dbody #wrapper1 {
  display:none;
}

#dwrapper {
  display:none;
  width:100%;
  height:100%;
  background-color:#ffffff;
  min-height:100vh;
  position:relative;
  background-size:cover;
  background-repeat:no-repeat;
  background-image:url('images/background.jpg');
}

.dbody #menubar1, 
.dbody #printhead, 
.dbody #wrapper1 {
  display:none;
}

.dbody #dwrapper {
  display:block;
}

#douter {
  width:100%;
  max-width:78vh;
  margin:0 auto; 
  text-align:center; 
  background-color:#fff5e0;
  min-height:100vh;
  position:relative;
  border-left: 1px solid #ffebcf;
  border-right: 1px solid #ffebcf;
}

#douter DIV, #douter P, #douter LABEL, #douter TD, #douter LI, #douter INPUT, #douter SELECT, #douter TEXTAREA, #douter TD {
  font-family:Verdana, Sans-Serif;
  font-size:14px;
}

#douter a:link, #douter a:visited, #douter a:hover, #douter a:active {
  color: #000000;
}

#douter textarea {
  font-size:16px;
}

#douter input[type="text"], #douter input[type="password"], #douter input[type="submit"], #douter select, #douter textarea {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;  
  -webkit-appearance: none;
  -moz-appearance: none;
  border:1px solid #808080;
  background-color:transparent;
  padding:2px 10px;
  color:#000000;
}

#douter input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 0;  
  background: #ffffff;
  outline: none;
  border:none;
  padding:0;
}

#douter input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 50px;
  box-shadow: none !important;
  background-color:transparent;
  background: url('images/thumb.png');
  border-radius: 0; 
  background-size:cover;
  background-repeat:no-repeat;
  cursor: pointer;
  border:none;
}

#douter input[type="range"]::-moz-range-thumb {
 -moz-appearance: none;
  appearance: none;  
  width: 16px;
  height: 50px;
  box-shadow: none !important;
  background-color:transparent;
  background: url('images/thumb.png');
  border-radius: 0; 
  background-size:cover;
  background-repeat:no-repeat;
  cursor: pointer;
  border:none;
}

#douter .minicolors-panel {
  border:1px solid #808080;
}

#douter .dtopmen {
  width:100%;
  background-color:#5C087E;
    
}

#douter .dtopmen td a,
#douter .dtopmen td img {
  display:block;
  width:100%;
}

#douter .dtopmen td:last-of-type {
  text-align:right;
}

/* CANVAS */

#douter #dlabel {
  position:relative;
  margin:0 auto; 
  text-align:center; 
  width:100%;
  padding-top:75.377777%;
  overflow:hidden;
  background:linear-gradient(0deg, #e02923 100%, #ffb133 0%);
  background-size:100%;
  background-position: center;
  border:none;
}

#douter #dlabel0 {
  position:absolute;
  text-align:center; 
  top:0;
  left:0;
  width:100%; 
  height:100%; 
  background-repeat:no-repeat;
  background-size:cover;
  overflow:hidden;
  container-type: inline-size; 
  border:none;
}

#douter #dlabel1 {
  position:absolute;
  text-align:center; 
  top:0;
  left:0;
  width:100%; 
  height:100%; 
  background-repeat:no-repeat;
  background-size:cover;
  overflow:hidden;
  container-type: inline-size; 
  border:none;
}

#douter #dcontrols {
  width:100%;
  display:none;
  box-sizing:border-box;
  text-align:center;
  padding:20px;
  position:relative;
}

#douter #dcontrols #dcontclose {
  position:absolute;
  top:5px;
  right:5px;
  display:block;
  width:30px;
  height:30px;
}

#douter #dcontrols #dcontclose img {
  width:100%;
  display:block;
}

#douter #dcontrols table {
  height:40px;
  width:100%;
  max-width: 500px;
  margin:10px auto 0 auto;
}

#douter #dcontrols table tr td {
  padding:4px 0;
  position:relative;
  font-size:11px;
  text-align:center;
}

#douter #dcontrols table tr #dcontrol1 {
  width:40px;
  height:40px;
}

#douter #dcontrols table tr #dcontrol1 #contcolour {
  background-color:#000000;
  cursor:pointer;
  width:99%;
  height:40px;
  border-radius:50%;
}

#douter #dcontrols table tr #dcontrol2 {
  width:calc(100% - 40px);
  height:40px;
  padding:4px 0;
  padding-left:10px;
}

#douter #dcontrols table tr #dcontrol2 #dcontsize {
  width:100%;
}

#douter #dcontrols.dcontroli span,
#douter #dcontrols.dcontroli table tr #dcontrol1 {
  display:none;
}

#douter #dcontrols.dcontroli table tr #dcontrol2 {
  width:100%;
  padding-left:0;
}

#douter #contpick {
  display:none;
  position:absolute;
  left:calc(50% - 110px);
  top:-40px;
  z-index:50;
  padding:20px;
}

#douter #dcontrols table tr #dcontrol4 {
  height:40px;
  padding:4px 0;
}

#douter #dcontrols table tr #dcontrol4 #dcontrans {
  width:100%;
}

#douter #dmenu {
  display:table;
  width:100%;
  border:none;
  padding:0;
  margin:0;
}

#douter #dmenu .dmenu {
  display:table-cell;
  width:20%;
  padding:0;
  background-color:#5C087E;
}

#douter #dmenu .dmenu1 {
  background-color:#E02923;
}

#douter #dmenu .dmenu img {
  width:100%;
  display:block;
}

#douter #dmenu .dmenu a:link, #douter #dmenu .dmenu a:visited, #douter #dmenu .dmenu a:hover, #douter #dmenu .dmenu a:active {
  display:block;
  width:100%;
  height:100%;
}

#douter #dgenerate {
  margin:20px auto 0 auto;
  text-align:center;
  width:120px;
}

#douter #dgenerate a:link, #douter #dgenerate a:visited, #douter #dgenerate a:hover, #douter #dgenerate a:active {
  display:block;
  width:100%;
  text-decoration:none;
  box-sizing:border-box;
  text-transform:uppercase;
}

#douter #dgenerate img {
  display:block;
  width:100%;
}

#douter #dresult {
  display:none;
  position:absolute;
  top:0;
  left:0;
  text-align:center; 
  width:100%; 
  z-index:50;
  background-color:#fff5e0;
  min-height:100%;
  box-sizing:border-box;
}

#douter #dresult2 {
  margin:2vh auto 0 auto;
  width:100%;
  position:relative;
  box-sizing:border-box;
  max-width:40vh;
}

#douter #dresult2 #bottle {
  width:100%;
}

#douter #dresult3 {
  position:absolute;
  display:block; 
  top:56.7%;
  left:17.1%;
  width:66%;
  overflow:hidden;
}

#douter #dresult4 {
  width:140%;
  margin-left:-20%;
  margin-right:-20%;
  overflow:hidden;
  text-align:center;
}

#douter #dresult5 {
  display:inline-block;
  width:80%;
  overflow:hidden;
  text-align:center;
}

#douter #dresimg {
  width:100%;
  aspect-ratio:0.975;
  display:block;
  border-top-left-radius: 50% 1.5%;
  border-top-right-radius: 50% 1.5%;
  border-bottom-left-radius: 50% 1.5%;
  border-bottom-right-radius: 50% 1.5%;
}

/* DRAG */

#douter .draggablei,
#douter .draggablet {
  position:absolute; 
  touch-action: none;
  user-select: none;
  z-index:10;
  border:2px solid transparent;
  cursor:pointer;
}

#douter .draggablet span {
  border: 2px dashed transparent;
}

#douter .draggableia,
#douter .draggableta span {
  z-index:50;
  border:2px dashed #ffffff;
}

.draggableia::after {
  content: '';
  background-image:url('images/arrows.png');
  position:absolute;
  right:-10px;
  bottom:-10px;
  width:22px;
  height:22px;
  z-index:20;
  background-size:100%;
}

#douter .draggablei img {
  width:100%;
  display:block;
  margin:0;
}

#douter .draggablei svg {
  width:100%;
  height:100%;
  display:block;
  fill:#000000;
}

#douter .draggablei svg .st0 {
  fill:#000000;
}

/* SLIDER */


#douter #diosouter {
  display:none;
  position:relative;
  width:100%;
  height:250px;
  min-height:250px;
  margin:0 auto;
  padding:0;
}

#douter #diosslider {
  position:relative;
  width:100%;
  height:100%;
  margin:0 auto;
  padding:0;
}

#douter #diosslider .slider {
  width: 100%;
  height: 100%;
}

#douter #diosslider .slider .slide {
  width:100%;
  height:100%;
  padding:0;
  text-align:center;
  background-size:100%;
}

/*
#douter #diosslider .slider .slide:nth-of-type(1) {
  background-image:url('scroll/section1.jpg');
}

#douter #diosslider .slider .slide:nth-of-type(2) {
  background-image:url('scroll/section2.jpg');
}

#douter #diosslider .slider .slide:nth-of-type(3) {
  background-image:url('scroll/section3.jpg');
}

#douter #diosslider .slider .slide:nth-of-type(4) {
  background-image:url('scroll/section4.jpg');
}

#douter #diosslider .slider .slide:nth-of-type(5) {
  background-image:url('scroll/section5.jpg');
}
*/

/* OPTIONS */

#douter .opthead {
  display:block;
  margin:20px 0;
  font-size:16px;
  text-transform:uppercase;
}

#douter .doptions {
  display:block;
  margin:20px 20px; 
}

#douter .doptions .doption {
  display:inline-block; 
  vertical-align:middle; 
  width:40px; 
  height:40px; 
  cursor:pointer;
  background-position:center;
  background-size:calc(100% + 16px);
  background-repeat: no-repeat;
  border-radius:50%;
  margin:0 2px 4px 2px;
  padding:5px;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid #C0C0C0;
  text-align:center;
  background-color:#eeeeee;
  fill:#000000 !important;
}

#douter .doptions .doption .doptiont {
  display:table;
  width:100%;
  height:100%;
}

#douter .doptions .doption .doptiont .doptionc {
  display:table-cell;
  width:100%;
  height:100%;
  vertical-align:middle;
  text-align:center;
}

#douter .doptions .doption .doption2 {
  width:calc(100% + 10px);
  height:calc(100% + 10px);
  margin:-5px 0 0 -5px;
  background-position:center;
  background-size:105% 105%;
  background-repeat: no-repeat;
  border-radius:50%;
}

#douter .doption img,
#douter .doption svg {
  width:100%;
  fill:#000000 !important;
}
#douter .doption svg.st0 {
  fill:#000000 !important;
}

.st0 {
  fill:#000000;
}

/* TITLE OPTIONS */

#douter #dtitleopts {
  width:calc(100% - 10px);
  max-width:500px;
  margin:0 auto;
}

#douter #dtitleopts tr td {
  padding:4px 0;
  vertical-align:middle;
  position:relative;
  font-size: 11px;
}

#douter #dtitleopts tr .sliderow {
  height:40px;
}

#douter #dtitleopts tr:nth-of-type(2) td:nth-of-type(2) {
  width:80px;
  padding-left:10px;
  padding-right:20px;
}

#douter #dtitleopts tr:nth-of-type(2) td:nth-of-type(3) {
  width:40px;
  text-align:right;
}

#douter #dtitleopts select {
  width:100%;
}

#douter #textwords {
  vertical-align:bottom;
  text-align:center;
  box-sizing:border-box;
  width:100%;
  height:80px;
  resize: none;
}

#douter #textfont {
  width:calc(100% - 78px);
  height:100%;
  display:inline-block;
}

#douter #textalign {
  margin-left:8px;
  width:70px;
  height:100%;
  display:inline-block;
}

#douter #textcolour {
  background-color:#000000;
  cursor:pointer;
  width:40px;
  height:40px;
  border-radius:50%;
}

#douter #textpick {
  display:none;
  position:absolute;
  left:calc(50% - 90px);
  top:-25px;
  z-index:50;
  padding:20px;
}

/* BACKGROUND */

#douter #backopts {
  width:calc(100% - 10px);
  max-width:500px;
  margin:0 auto;
}

#douter #backopts tr td {
  width:40px;
  padding:4px 0;
  position:relative;
  font-size:11px;
}

#douter #backopts tr .sliderow {
  height:40px;
}

#douter #backopts tr .sliderow1 {
  width:calc(100% - 80px);
}

#douter #backopts tr .sliderow1 .backslide {
  width:calc(100% - 20px);
  margin:0 10px;
}

#douter #backcolour1 {
  background-color:#e02923;
  cursor:pointer;
  width:99%;
  height:40px;
  border-radius:50%;
}

#douter #backcolour2 {
  background-color:#ffb133;
  cursor:pointer;
  width:99%;
  height:40px;
  border-radius:50%;
}

#douter #backpick1,
#douter #backpick2 {
  display:none;
  position:absolute;
  left:calc(50% - 107px);
  top:-40px;
  z-index:50;
  padding:20px;
}

/* TEXTURE */

#douter #transopts {
  width:calc(100% - 10px);
  max-width:500px;
  margin:20px auto 0 auto;
}

#douter #transopts tr td {
  position:relative;
  padding:4px 0;
  font-size:11px;
}

#douter #transopts tr .sliderow {
  height: 40px;
}

/* ITEMS */

#douter .remove {
  display:none;
  position:absolute;
  top:-30px;
  right:-30px;
  width:30px;
  height:30px;
  cursor:pointer;
  z-index:120;
}

#douter .rotate1 {
  display:none;
  position:absolute;
  top:-25px;
  left:-25px;
  width:25px;
  height:25px;
  cursor:pointer;
  z-index:20;
}

#douter .rotate2 {
  display:none;
  position:absolute;
  bottom:-25px;
  left:-25px;
  width:25px;
  height:25px;
  cursor:pointer;
  z-index:20;
}

#douter .remove img,
#douter .rotate1 img,
#douter .rotate2 img {
  width:100%;
}

#douter .draggableia .remove,
#douter .icon2.draggableia .rotate1,
#douter .icon2.draggableia .rotate2 {
  display:block;
}

#douter #dlogo {
  display:block;
  width:24%;
  left:37.96%;
  top:4.5%;
  z-index:22;
}

#douter #dtitle {
  display:block;
  width:56.14%; 
  left:21.93%; 
  top:25%;
  font-size:5cqw;
  line-height:5cqw;
  overflow:visible;
  font-family:ABCArizonaFlare-Bold;
  z-index:21;
}

#douter #dtitle span {
  display:inline-block;
  white-space: nowrap;
}

#douter #dlabel1 .icon1,
#douter #dlabel1 .icon2 {
  bottom:10cqw;
  left:calc(50% - 13cqw);
  width:26cqw;
}

#douter #dlabel1 .icon1 img,
#douter #dlabel1 .icon2 img {
  width:100%;
}

#douter #dclosepop,
#douter #dsubmpop {
  display:none;
  position:absolute;
  top:0;
  left:0;
  text-align:center; 
  width:100%; 
  z-index:150;
  min-height:100%;
  box-sizing:border-box;
  padding:80px 20px;
}

#douter #dclosepop1,
#douter #dsubmpop1 {
  width:100%;
  margin:0 auto;
  background-color:#FFB032;
  padding:10px 10px 30px 10px;
  box-sizing:border-box;
  text-align: center;
}

.ss-close-block-text {
  position: relative;  
  display: block;
  box-sizing:border-box;
  width: 100%;
  height: auto;
  text-align: center;
  font-family: "ABCArizonaFlare-Bold" !important;
  font-size: 25px !important;
  line-height: 30px !important;
  color: #000;
  text-transform: uppercase;
  padding: 2vw 10% 2vw 10%;
}
.ss-close-block-text2 {
  position: relative;  
  display: block;
  box-sizing:border-box;
  width: 100%;
  height: auto;
  text-align: center;
  font-family: "ABCArizonaFlare-Bold" !important;
  font-size: 20px !important;
  line-height: 25px !important;
  color: #000;
  padding: 0 10% 1vw 10%;
}
.ss-close-block-butt {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  margin: 10px;
}
.ss-close-block-butt a:link,
.ss-close-block-butt a:visited,
.ss-close-block-butt a:active,
.ss-close-block-butt a:hover {
  display: block;
  border: none;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  font-family: 'ABCArizonaFlare-Bold' !important;
  background-color: #E02923;
  padding: 5px 10px;
  text-decoration: none;
  color: #ffffff !important;
  font-size: 25px !important;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.ss-close-block-butt a:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


@media only screen and (max-width: 800px) {
}