body {margin: 10px;}
#pmLinkTwo{height:32px;margin-right:4px;float:right;margin-right:12px;display:block;margin-top:18px;display:none;}
#bg{
    margin: 0 auto;
    padding-bottom:26px;
}
#socialWrapper{
    margin:0 auto;float:none;max-width:800px;height:auto;
}
#shareImageWrapper {
  	position:relative;
	text-align:center;
	max-width:800px;
	margin:0 auto;
}
#shareImage {cursor: pointer;}
.shareTxt {text-align:center;font-size:20px;font-weight:bold; max-width:600px;margin:20px auto 0;}
.pageTitle {text-align:center;font-size:26px;font-weight:bold; max-width:600px;margin:20px auto 0;}
.pageText {text-align:center;font-size:20px;font-weight:normal; max-width:600px;margin:20px auto 0;}
#logoImg {display:block;margin:0 auto;max-width:600px;margin-top:15px;}
#leftBox{
    margin-top:26px;
    margin-right:26px;
    height:150px;
    min-width:300px;
    text-align:center;
    line-height:20px;
    font-size:15px;
    padding-top:15px;
    font-weight:bold;
    display:none;
}
#rightBox{
    min-width:300px;
    width: 75%;
    margin: 20px auto;
    text-align: center;
}
#instaIcon {width:100%;}
#fbIcon, #twIcon, #liIcon, #dlPhoto, #instagram, #dlMM {
	max-width:90px;
	cursor:pointer;
	margin-right: 2%;
	margin-left: 2%;
}
#dlMM {margin-right: 0;}
#btnWrapper{
    max-width:200px;
    max-height:106px;
}
#get_started_btn{
    color: white; font-family: arial, sans-serif; width: 240px; text-align: center; height: 40px; line-height: 41px; overflow: hidden; cursor: pointer;
    margin: 1.5em auto 0 auto; font-size: 14px; text-decoration: none; font-weight: bold; background: #f79857; padding: 0 10px; box-sizing: content-box; background-image: -webkit-linear-gradient(top, #f79857, #f48240); background-image: -moz-linear-gradient(top, #f79857, #f48240); background-image: -ms-linear-gradient(top, #f79857, #f48240); background-image: -o-linear-gradient(top, #f79857, #f48240); background-image: linear-gradient(to bottom, #f79857, #f48240);
    margin-top:15px;
}
#get_started_arrow{
    font-family:dingbats, arial unicode ms, code2000, sans-serif; display:inline-block; vertical-align:bottom; font-size:30px;
}

.cd-image-container {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0em auto;
}
.cd-image-container img {
	display: block;
}

.cd-image-label {
  	position: absolute;
	bottom: 0;
	right: 0;
	color: #ffffff;
	padding: 1em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	opacity: 0;
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	-ms-transform: translateY(20px);
	-o-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
	-moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
	transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cd-image-label.is-hidden {
  	visibility: hidden;
}
.is-visible .cd-image-label {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.cd-resize-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	overflow: hidden;
	/* Force Hardware Acceleration in WebKit */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.cd-resize-img img {
  	position: absolute;
	left: 0;
	top: 0;
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
}
.cd-resize-img .cd-image-label {
	right: auto;
	left: 0;
}
.is-visible .cd-resize-img {
	width: 50%;
	/* bounce in animation of the modified image */
	-webkit-animation: cd-bounce-in 0.7s;
	-moz-animation: cd-bounce-in 0.7s;
	animation: cd-bounce-in 0.7s;
}
.cd-image-label {display:none; visibility: hidden;}
@-webkit-keyframes cd-bounce-in {
	0% {
		width: 0;
	}
	60% {
		width: 55%;
	}
	100% {
		width: 50%;
	}
}
@-moz-keyframes cd-bounce-in {
	0% {
		width: 0;
	}
	60% {
		width: 55%;
	}
	100% {
		width: 50%;
	}
}
@keyframes cd-bounce-in {
	0% {
		width: 0;
	}
	60% {
		width: 55%;
	}
	100% {
		width: 50%;
	}
}
.cd-handle {
	position: absolute;
	height: 33px;
	width: 33px;
	/* center the element */
	left: 50%;
	top: 50%;
	margin-left: -16px;
	margin-top: -16px;
	border-radius: 50%;
	background: #000000 url("../images/slider.svg") no-repeat center center;
	cursor: move;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0) scale(0);
	-moz-transform: translate3d(0, 0, 0) scale(0);
	-ms-transform: translate3d(0, 0, 0) scale(0);
	-o-transform: translate3d(0, 0, 0) scale(0);
	transform: translate3d(0, 0, 0) scale(0);
}
.cd-handle.draggable {
	/* change background color when element is active */
	background: #f8d134 url("../images/slider_dragged.svg") no-repeat center center;
}
.is-visible .cd-handle {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scale(1);
	-moz-transform: translate3d(0, 0, 0) scale(1);
	-ms-transform: translate3d(0, 0, 0) scale(1);
	-o-transform: translate3d(0, 0, 0) scale(1);
	transform: translate3d(0, 0, 0) scale(1);
	-webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
	-moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
	transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}

img {
    -webkit-user-select: auto; /* Chrome, Opera, Safari */
    -moz-user-select: auto; /* Firefox 2+ */
    -ms-user-select: auto; /* IE 10+ */
    user-select: auto; /* Standard syntax */
}
.click {cursor:pointer;}
#instagram {position:relative; display:inline-block;}
#instagramLayover, #shareLayover {position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; background:rgba(0,0,0,.4); display:none;}
#sharePopup {font-family:'Arial'; width:300px; height:auto; padding:25px; position:absolute; top:calc(50% - 90px); left:calc(50% - 175px); background:#FFF; border:2px solid #000; z-index:101; text-align:center; color:#000; font-size:14px; line-height:18px; display:none;}
#jpgImg {height:125px; width:125px; position:relative; margin:0 50px 0 0; background: url("../images/jpg-download.png") no-repeat; background-size:contain; float:left;}
#gifArea {height:125px; width:125px; position:relative; float:right;}
#gifSpinner {    
	position:absolute;
	top: 25px;
    left: 15px;
    z-index: 10;
    border: 10px solid #FFF;
    border-radius: 50%;
    border-top: 10px solid #bfbfbf;
    width: 50px;
    height: 50px;
    animation: spinner 1s linear infinite;
	display:none;
  }
  
  @keyframes spinner {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }
#gifImg {height:125px; width:125px; background: url("../images/gif-download.png") no-repeat; background-size:contain; z-index:1;}
/* MP4 option: mirrors #gifArea/#gifSpinner/#gifImg exactly, including the
   `spinner` keyframe above, so the three download tiles stay identical. */
#mp4Area {height:125px; width:125px; position:relative;}
#mp4Spinner {
	position:absolute;
	top: 25px;
    left: 15px;
    z-index: 10;
    border: 10px solid #FFF;
    border-radius: 50%;
    border-top: 10px solid #bfbfbf;
    width: 50px;
    height: 50px;
    animation: spinner 1s linear infinite;
	display:none;
}
#mp4Img {height:125px; width:125px; background: url("../images/mp4-download.png") no-repeat; background-size:contain; z-index:1;}
#instagramPopup {font-family:'Arial'; width:300px; position:absolute; bottom:calc(100% + 12px); left:calc(50% - 165px); background:#FFF; padding:15px; z-index: 9999; text-align:center; color:#000; font-size:14px; line-height:18px; pointer-events: none; display:none;}
#instaHead {font-size:17px; margin-bottom:2px; font-weight:bold;}
#instaClose {color:#000; position:absolute; top:10px; right:10px; cursor:pointer;}
.arrow-down {
	position:absolute;
	bottom:-19px;
	left:calc(50% - 9px);
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 20px solid #fff;
}
@media (max-width: 812px){
    #socialWrapper{margin:0 auto;float:none;max-width:600px;height:auto; margin: 0 auto;
    float: none;}
    #leftBox{
        margin:0 auto;
        margin-top:26px;
        float:none;
        width:250px;
        min-width:250px;
        height:125px;
        padding-top:5px;
    }
    #rightBox{
        display:block;
        float:none;
        width:80%;
        min-width:250px;
    }
    #get_started_btn{width:200px;margin-top:12px;}
    #fbIcon, #twIcon, #dlPhoto, #liIcon, #instagram, #dlMM {
        width: 14%;
    }
	#instagramPopup {left: calc(50% - 224px) !important; bottom: calc(100% + 16px);}
	.arrow-down {left:65% !important;}
	.pageText{
		font-size: 18px;
	}
}

@media (max-width: 400px){
	#rightBox{
		width:100%;
		min-width:250px;
	}
}

.loader {
  width: 64px;
  height: 64px;
  position: relative;
  background: #FFF;
  border-radius: 4px;
  overflow: hidden;
}

.loader--fill {
  transform: scale(5);
  transform-origin: center;
}

.loader:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  transform: rotate(45deg) translate(30%, 40%);
  background: #ff9371;
  box-shadow: 32px -34px 0 5px #ff3d00;
  animation: slide 2s infinite ease-in-out alternate;
}

.loader:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff3d00;
  transform: rotate(0deg);
  transform-origin: 35px 145px;
  animation: rotate 2s infinite ease-in-out;
}

@keyframes slide {
  0%, 100% { bottom: -35px; }
  25%, 75% { bottom: -2px; }
  20%, 80% { bottom: 2px; }
}

@keyframes rotate {
  0% { transform: rotate(-15deg); }
  25%, 75% { transform: rotate(0deg); }
  100% { transform: rotate(25deg); }
}

/* SVG LOADER STYLES */
.sketch-loader-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.pencil-loader {
  fill: none;
  stroke: #2b2b2b;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* PERFECT LOOP MATH - Stroke Dash + Gap must = Total Path Length */
.setup-Core-loader { stroke-dasharray: 250 650; } 
.anim-Core-loader { animation: drawCoreLoader 10s linear infinite; }
@keyframes drawCoreLoader { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }

.setup-Triangle-loader { stroke-dasharray: 350 1050; }
.anim-Triangle-loader { animation: drawTriangleLoader 14s linear infinite; }
@keyframes drawTriangleLoader { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }

.setup-Frame-loader { stroke-dasharray: 450 1450; }
.anim-Frame-loader { animation: drawFrameLoader 18s linear infinite; }
@keyframes drawFrameLoader { from { stroke-dashoffset: 1900; } to { stroke-dashoffset: 0; } }

/* 20-LAYER FADE ENGINE */
.s0-loader { opacity: 1.00; stroke-width: 3.5; animation-delay: -0.50s; }
.s1-loader { opacity: 0.95; stroke-width: 3.4; animation-delay: -0.475s; }
.s2-loader { opacity: 0.90; stroke-width: 3.3; animation-delay: -0.45s; }
.s3-loader { opacity: 0.85; stroke-width: 3.2; animation-delay: -0.425s; }
.s4-loader { opacity: 0.80; stroke-width: 3.0; animation-delay: -0.40s; }
.s5-loader { opacity: 0.75; stroke-width: 2.9; animation-delay: -0.375s; }
.s6-loader { opacity: 0.70; stroke-width: 2.8; animation-delay: -0.35s; }
.s7-loader { opacity: 0.65; stroke-width: 2.6; animation-delay: -0.325s; }
.s8-loader { opacity: 0.60; stroke-width: 2.5; animation-delay: -0.30s; }
.s9-loader { opacity: 0.55; stroke-width: 2.4; animation-delay: -0.275s; }
.s10-loader{ opacity: 0.50; stroke-width: 2.2; animation-delay: -0.25s; }
.s11-loader{ opacity: 0.45; stroke-width: 2.1; animation-delay: -0.225s; }
.s12-loader{ opacity: 0.40; stroke-width: 2.0; animation-delay: -0.20s; }
.s13-loader{ opacity: 0.35; stroke-width: 1.8; animation-delay: -0.175s; }
.s14-loader{ opacity: 0.30; stroke-width: 1.6; animation-delay: -0.15s; }
.s15-loader{ opacity: 0.25; stroke-width: 1.4; animation-delay: -0.125s; }
.s16-loader{ opacity: 0.20; stroke-width: 1.2; animation-delay: -0.10s; }
.s17-loader{ opacity: 0.15; stroke-width: 1.0; animation-delay: -0.075s; }
.s18-loader{ opacity: 0.10; stroke-width: 0.8; animation-delay: -0.05s; }
.s19-loader{ opacity: 0.05; stroke-width: 0.5; animation-delay: -0.025s; }

/* ===== SKETCH LOADING PLACEHOLDER ("pencil strokes") =====
 * The loader block above (.pencil-loader / .setup-*-loader / .anim-*-loader /
 * .s0..s19-loader plus the drawCoreLoader / drawTriangleLoader / drawFrameLoader
 * keyframes) styles the old inline comet-trail SVG. It is superseded by the
 * rules here and can be deleted once every page has stopped emitting that SVG
 * -- until then it is still needed, or those paths render as solid black.
 *
 * Three short marks laid down in turn, on a 1.8s loop. Every animated path
 * declares pathLength="100" so the dash maths is in percent and does not depend
 * on the measured geometry of the path.
 *
 * Geometry comes from the page: it sets --loader-top / --loader-box-w /
 * --loader-box-h on #sketchLoader so the marks land over #sketchCanvas rather
 * than the middle of #sketchArea. For the rect and footer layouts the canvas is
 * not centred in the area, and centring on the area would drop the placeholder
 * below where the sketch appears, making the picture jump when it loads.
 *
 * The strokes are currentColor, so --loader-ink recolours the whole set for a
 * brand background without touching anything else.
 */
#sketchLoader .loader-box {
    position: absolute;
    top: var(--loader-top, 0px);
    left: 0;
    width: var(--loader-box-w, 100%);
    height: var(--loader-box-h, 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--loader-ink, #2b2b2b);
}

/* preserveAspectRatio centres the 200x200 viewBox in the box, so the marks stay
 * centred on the canvas whatever the layout's aspect ratio. */
#sketchLoader .loader-box svg {
    width: 100%;
    height: 100%;
    display: block;
}

#sketchLoader .loader-mark {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 7;
    stroke-dasharray: 100;
    /* `backwards` matters: marks 2 and 3 sit in a stagger delay on first paint, and
     * without it they hold their own style -- dashoffset 0, i.e. fully drawn -- and
     * then snap to invisible when the animation starts. */
    animation: sketchTickDraw 1.8s ease-in-out infinite backwards;
}

#sketchLoader .loader-mark-2 { animation-delay: .18s; }
#sketchLoader .loader-mark-3 { animation-delay: .36s; }

@keyframes sketchTickDraw {
    0%, 100% { stroke-dashoffset: 100; opacity: .25; }
    40%, 70% { stroke-dashoffset: 0;   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    /* Leave the three marks drawn, drop the redrawing. */
    #sketchLoader .loader-mark {
        animation: none;
        stroke-dashoffset: 0;
        opacity: .55;
    }
}

/* ===== Modernized share + Instagram popups ===== */
#shareLayover, #instagramLayover {
    background: rgba(15, 23, 42, 0.55) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: pmFade .25s ease;
}
@keyframes pmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmPop {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes pmPopUp {
    from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.96); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

#sharePopup {
    font-family: inherit !important;
    box-sizing: border-box;
    width: min(92vw, 360px) !important;
    height: auto !important;
    padding: 26px 24px 20px !important;
    border: none !important;
    border-radius: 22px !important;
    background: #fcfcfc !important;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.30) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #0f172a !important;
    animation: pmPop .28s cubic-bezier(.16, 1, .3, 1);
}
#sharePopupTitle { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
#sharePopupSubtitle { font-size: 13.5px; color: #64748b; margin: 4px 0 20px; }
#sharePopup .dl-options { display: flex; gap: 12px; justify-content: center; align-items: flex-start; }
#sharePopup .dl-option {
    flex: 1 1 0; max-width: 140px;
    border: none;
    background: transparent;
    padding: 6px 4px;
    cursor: pointer;
    transition: transform .18s ease;
}
#sharePopup .dl-option:hover { transform: translateY(-2px) scale(1.01); }
#sharePopup .dl-option:active { transform: translateY(-1px) scale(1); }
/* Fluid, not a fixed 150px: with three formats, fixed-width tiles overflow a
   360px popup on a phone. width:100% + a square aspect-ratio lets flexbox size
   them, and `background-size: auto 100%` keeps every icon the same rendered
   height whatever its own proportions are. Two-format pages (the live
   index.php) simply get slightly smaller tiles. */
#sharePopup #jpgImg, #sharePopup #gifImg, #sharePopup #mp4Img,
#sharePopup #gifArea, #sharePopup #mp4Area {
    float: none !important; margin: 0 auto !important;
    width: 100% !important; height: auto !important;
    max-width: 140px; aspect-ratio: 1 / 1;
}
#sharePopup #gifArea, #sharePopup #mp4Area { position: relative; }
#sharePopup #jpgImg, #sharePopup #gifImg, #sharePopup #mp4Img {
    background-size: auto 100% !important; background-position: center !important; background-repeat: no-repeat !important;
}
/* Centred with negative margins, NOT with transform. The `spinner` keyframes
   animate `transform: rotate()`, and a transform here would fight it: an
   !important author declaration outranks an animation in the cascade, so it
   freezes the spin outright, and even without !important the rotate() would just
   replace the translate() and throw the position off.
   Keep the margins at half the width/height -- so 50%/50% means dead centre, and
   the values below are a deliberate nudge off it. */
#sharePopup #gifSpinner, #sharePopup #mp4Spinner {
    top: 44% !important;
    left: 40% !important;
    width: 34px !important;
    height: 34px !important;
    margin: -17px 0 0 -17px !important;
    border: 6px solid #e2e8f0 !important; border-top: 6px solid #6366f1 !important;
    opacity: 0.75;
}
#sharePopup .dl-label { margin-top: 12px; font-size: 13px; font-weight: 700; color: #334155; pointer-events: none; }
#sharePopup #gifText {
    margin: 18px auto 2px !important; max-width: 260px;
    font-size: 11.5px !important; font-weight: 600 !important; color: #94a3b8 !important; line-height: 15px !important;
}
/* Mobile records the video in the background as soon as the page is ready. For
   those few seconds the blue spinner rides on top of the icon, which is left in
   full colour -- the spinner rule already stacks it above (z-index 10 vs the
   icon's 1), so no extra rule is needed here. */
#mp4Note {
    margin: 14px auto 2px; max-width: 260px;
    font-size: 11.5px; font-weight: 600; color: #94a3b8; line-height: 15px;
}
/* The failure case. A saved video has no message at all -- it closes the popup
   instead -- so this shares the waiting line's slot and nothing else does. */
#mp4Note.mp4-note-bad { color: #b91c1c; }

#instagramPopup {
    font-family: inherit !important;
    box-sizing: border-box;
    width: min(88vw, 320px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(100% + 16px) !important;
    padding: 20px 18px 18px !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.28) !important;
    color: #334155 !important;
    text-align: center;
    font-size: 13.5px !important;
    line-height: 19px !important;
    pointer-events: auto !important;
    animation: pmPopUp .26s cubic-bezier(.16, 1, .3, 1);
}
#instagramPopup .insta-badge {
    width: 46px; height: 46px; margin: 0 auto 10px;
    border-radius: 14px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px rgba(214, 36, 159, 0.35);
}
#instagramPopup .insta-badge svg { width: 26px; height: 26px; fill: #fff; }
#instaHead {
    font-size: 15px !important; font-weight: 800 !important; margin-bottom: 6px !important;
    color: #0f172a !important; text-transform: uppercase; letter-spacing: .02em;
}
#instaClose {
    top: 10px !important; right: 10px !important;
    width: 26px !important; height: 26px !important;
    border-radius: 50% !important;
    background: #f1f5f9; color: #475569 !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; line-height: 1;
    transition: background .18s ease, color .18s ease;
}
#instaClose:hover { background: #fee2e2; color: #dc2626 !important; }
.arrow-down {
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-top: 14px solid #ffffff !important;
    bottom: -13px !important;
    filter: drop-shadow(0 4px 3px rgba(2, 6, 23, 0.08));
}
@media (max-width: 812px) {
    #instagramPopup { left: 50% !important; transform: translateX(-72%) !important; }
    .arrow-down { left: 72% !important; }
}