.row.after-title-section { overflow: hidden; }
.row.after-title-section #steps { width: 300%; max-width: 300%; height: 100%; padding: 0px; position: relative; left: 0%;  }
.row.after-title-section #steps .step { float: left; width: calc(100% / 3); margin: unset; height: 100%; position: relative; }
.row.after-title-section #steps .step .col-12 { padding: 0px; height: 100%; text-align: center; }

.row.after-title-section #steps.left-1 { left: -100vw !important; }
.row.after-title-section #steps.left-2 { left: -200vw !important; }

.contentarea, .camera { width: 100%; height: 100%; }
#video { max-width: 100%; max-height: 100%; height: 100%; width: 100%; -webkit-transform: scaleX(-1); transform: scaleX(-1); }
/*#photo { border: 1px solid black; box-shadow: 2px 2px 3px black; width:320px; height:240px; }*/
#canvas { display:none; }


/*.output { width: 340px; display:inline-block; vertical-align: top; }*/
#startbutton { border:  none; outline:  none; box-shadow:  none; cursor:  pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.6); }
#startbutton div { width: 280px; height: 280px; border-radius: 100%; border: 6px solid; position: relative; }
#startbutton div p { position: absolute; width: 90%; top: 180px; text-align: center; left: 50%; transform: translateX(-50%); font-size: 31px; margin: 0px; }
#startbutton div img { position: relative; top: -20px; }
#info-instructions { position: relative; margin: 50px auto 0px; max-width: 470px; text-align: center; }
#info-instructions * { font-size: 40px; line-height: 50px; }

span.absolute-span { position: absolute; left: 50%; visibility: hidden; }
#info-instructions span.absolute-span { top: 0px; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
#startbutton div span.absolute-span { color: white; font-size: 104px; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.show-countdown .absolute-span { visibility: visible; }
#startbutton.show-countdown div { border-color: black; background: black; }
.show-countdown .lets-hide-it { visibility: hidden; }

div#edit-photo .phfr { height:  50%; margin-bottom: 20px;/*height: calc((100% - (25px * 4)) / 4); margin: 0 auto 25px;*/ position: relative; }
div#edit-photo .phfr img { background: rgb(187 172 160 / 10%); border-radius: 10px; }
div#edit-photo .frame { height: auto; /*height: 100%;*/ }
div#edit-photo .frame.no-frame { border: 1px solid rgb(171 150 133 / 50%); }
div#edit-photo .frame.selected-frame { border: 5px solid; }
div#edit-photo .all-frames { /*height: 90%;*/ height: 73%; padding: 0px 40px; /*overflow: auto; display: flex; flex-direction: column;*/ }
div#edit-photo .no-frame-txt { pointer-events:  none; margin: 0px; position: absolute; width: 100%; text-align: center; font-size: 1vh; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

/* Vertical */
/*.output { position: relative; margin: 0 auto; max-width: 85%; max-height: 100%; height: 100%; display:  inline-block; }*/

/* Horizontal */
.output { position: relative; margin: 0 auto; width: 100%; }

#photo, #base-image { margin: 0 auto; display: table; max-height: 100%; }

.add-frame-section { padding-top: 50px; padding-bottom: 50px; padding-left: 0px; }
.preview-photo { padding-right: 0px; padding-top: 50px; padding-bottom: 50px; }
/*button#createPhoto { border: none; background: #bdac9f; color: white; font-size: 16px; padding: 3px 10px; }*/
button#createPhoto { border: none; background: #bdac9f; color: white; font-size: 22px; padding: 10px 40px; margin-top: 40px; }
#photo, #photo-frame { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

div#qr-photo * { color: white; text-decoration: none; outline: none; font-size: 39px; text-align: center; }
div#qr-photo p { line-height: 45px; }
div#qr-photo a img { width: 95px; margin: 50px auto 20px; display: table; }
div#qr-photo a { font-size: 21px; }
div#qrCode svg { width: 206px; height: 206px; background: white; padding: 10px; position: relative; z-index: 1; margin-top: 15px; }

.preview-photo { height: 608px !important; }
.add-frame-section { height: calc(100% - 608px) !important; }