@charset "UTF-8";
/*--------------------------------------------------------------------------------*/
/*EXTENDS*/
/*--------------------------------------------------------------------------------*/
@font-face { font-family: "fotoframeicon"; src: url("../fonts/fotoframeicon.ttf?afa0aq") format("truetype"), url("../fonts/fotoframeicon.woff?afa0aq") format("woff"); font-weight: normal; font-style: normal; font-display: block; }

[class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "fotoframeicon" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-repeat:before { content: ""; }

.icon-square:before { content: ""; }

.icon-portrait:before { content: ""; }

.icon-share:before { content: ""; }

.icon-download:before { content: ""; }

.icon-copy:before { content: ""; }

.icon-rotate:before { content: ""; }

.icon-zoom-in:before { content: ""; }

.icon-zoom-out:before { content: ""; }

.icon-image:before { content: ""; }

.icon-camera:before { content: ""; }

.icon-chevron-left:before { content: ""; }

.icon-chevron-right:before { content: ""; }

.icon-back:before { content: ""; }

/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }

.slick-list:focus { outline: none; }

.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; }

.slick-track:before, .slick-track:after { content: ""; display: table; }

.slick-track:after { clear: both; }

.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }

[dir="rtl"] .slick-slide { float: right; }

.slick-slide img { display: block; }

.slick-slide.slick-loading img { display: none; }

.slick-slide.dragging img { pointer-events: none; }

.slick-initialized .slick-slide { display: block; transition: all 0.3s ease; }

.slick-loading .slick-slide { visibility: hidden; }

.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

.croppie-container { width: 100%; height: 100%; }

.croppie-container .cr-image { z-index: -1; position: absolute; top: 0; left: 0; transform-origin: 0 0; max-height: none; max-width: none; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }

.croppie-container .cr-boundary { position: relative; overflow: hidden; margin: 0 auto; z-index: 1; width: 100%; height: 100%; }

.croppie-container .cr-viewport { position: absolute; border: 2px solid #fff; margin: auto; top: 0; bottom: 0; right: 0; left: 0; box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5); z-index: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }

.croppie-container .cr-resizer { position: absolute; border: 2px solid #fff; margin: auto; top: 0; bottom: 0; right: 0; left: 0; box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5); z-index: 0; z-index: 2; box-shadow: none; pointer-events: none; }

.croppie-container .cr-resizer-vertical { position: absolute; pointer-events: all; bottom: -5px; cursor: row-resize; width: 100%; height: 10px; }

.croppie-container .cr-resizer-vertical::after { display: block; position: absolute; box-sizing: border-box; border: 1px solid black; background: #fff; width: 10px; height: 10px; content: ''; left: 50%; margin-left: -5px; }

.croppie-container .cr-resizer-horisontal { position: absolute; pointer-events: all; right: -5px; cursor: col-resize; width: 10px; height: 100%; }

.croppie-container .cr-resizer-horisontal::after { display: block; position: absolute; box-sizing: border-box; border: 1px solid black; background: #fff; width: 10px; height: 10px; content: ''; top: 50%; margin-top: -5px; }

.croppie-container .cr-original-image { display: none; }

.croppie-container .cr-vp-circle { border-radius: 50%; }

.croppie-container .cr-overlay { z-index: 1; position: absolute; cursor: move; touch-action: none; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }

.croppie-container .cr-slider-wrap { width: 75%; margin: 15px auto; text-align: center; }

.croppie-result { position: relative; overflow: hidden; }

.croppie-result img { position: absolute; }

/*************************************/
/***** STYLING RANGE INPUT ***********/
/*************************************/
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
/*************************************/
.cr-slider { -webkit-appearance: none; width: 300px; max-width: 100%; padding-top: 8px; padding-bottom: 8px; background-color: transparent; }

.cr-slider::-webkit-slider-runnable-track { width: 100%; height: 3px; background: rgba(0, 0, 0, 0.5); border: 0; border-radius: 3px; }

.cr-slider::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: #ddd; margin-top: -6px; }

.cr-slider:focus { outline: none; }

.cr-slider:focus::-ms-fill-lower { background: rgba(0, 0, 0, 0.5); }

.cr-slider:focus::-ms-fill-upper { background: rgba(0, 0, 0, 0.5); }

.cr-slider::-moz-range-track { width: 100%; height: 3px; background: rgba(0, 0, 0, 0.5); border: 0; border-radius: 3px; }

.cr-slider::-moz-range-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: #ddd; margin-top: -6px; }

.cr-slider:-moz-focusring { outline: 1px solid white; outline-offset: -1px; }

.cr-slider::-ms-track { width: 100%; height: 5px; background: transparent; border-color: transparent; border-width: 6px 0; color: transparent; }

.cr-slider::-ms-fill-lower { background: rgba(0, 0, 0, 0.5); border-radius: 10px; }

.cr-slider::-ms-fill-upper { background: rgba(0, 0, 0, 0.5); border-radius: 10px; }

.cr-slider::-ms-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: #ddd; margin-top: 1px; }

/*******************************************/
/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls { position: absolute; bottom: 5px; left: 5px; z-index: 1; }

.cr-rotate-controls button { border: 0; background: none; }

.cr-rotate-controls i:before { display: inline-block; font-style: normal; font-weight: 900; font-size: 22px; }

.cr-rotate-l i:before { content: '↺'; }

.cr-rotate-r i:before { content: '↻'; }

@font-face { font-family: 'Montserrat-FF'; src: url("../../fonts/montserrat/Montserrat-Regular.ttf") format("truetype"), url("../../fonts/montserrat/Montserrat-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: block; }

@font-face { font-family: 'Montserrat-FF'; src: url("../../fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype"), url("../../fonts/montserrat/Montserrat-SemiBold.woff") format("woff"); font-weight: 500; font-style: normal; font-display: block; }

body { margin: 0 0 55px; padding: 0; }

* { box-sizing: border-box; }

.text-center { text-align: center; }

a { text-decoration: none; transition: all 0.3s ease; }

button { transition: all 0.3s ease; }

button:hover { cursor: pointer; }

p { font-size: 14px; white-space: normal; }

.mgt-8 { margin-top: 8px; }

.mgb-8 { margin-bottom: 8px; }

.mgt-16 { margin-top: 16px; }

.mgb-16 { margin-bottom: 16px; }

.mgt-24 { margin-top: 24px; }

.mgb-24 { margin-bottom: 24px; }

.mgt-32 { margin-top: 32px; }

.mgb-32 { margin-bottom: 32px; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.hide-frame { display: none !important; }

@media only screen and (max-width: 520px) { .mobile-hide { display: none !important; } }

.mobile-show { display: none; }

@media only screen and (max-width: 520px) { .mobile-show { display: block; } }

#my_camera { margin: 0 auto 16px; }

#upload { display: none; }

.fotoframe { width: 550px; margin: auto; padding: 26px; font-family: "Montserrat-FF",Arial, Tahoma, sans-serif; font-weight: 500; position: relative; border-radius: 16px; }

@media only screen and (max-width: 520px) { .fotoframe { width: 100%; padding: 20px 20px 24px; margin-top: 24px; } }

@media only screen and (max-width: 320px) { .fotoframe { padding: 16px 8px 24px; } }

.fotoframe.ready .cr-slider-wrap { display: flex; margin-top: 80px; align-items: center; justify-content: center; width: 100%; position: relative; z-index: 10; }

.fotoframe__container { white-space: nowrap; overflow: hidden; }

.fotoframe__step { display: flex; margin: 10px 0 16px; }

.fotoframe__step-item { width: 100%; margin: 2px; }

.fotoframe__step-item:first-child { margin: 2px 0; }

.fotoframe__step-item:last-child { margin: 2px 0; }

.fotoframe__step-bar { border-radius: 100px; width: 100%; height: 4px; }

.fotoframe__step-text { text-align: center; margin-top: 12px; width: 100%; font-size: 12px; white-space: normal; }

.fotoframe__title { font-size: 14px; text-align: center; padding: 8px; }

.fotoframe__title--nobg { background: none !important; }

@media only screen and (max-width: 520px) { .fotoframe__title { margin-left: 24px; margin-right: 24px; } }

.fotoframe__title h2 { font-size: 18px; }

.fotoframe__sliderframe { width: 100%; }

.fotoframe__sliderframe.square-height { height: 350px; }

@media only screen and (max-width: 520px) { .fotoframe__sliderframe.square-height { height: 270px; } }

.fotoframe__sliderframe.portrait-height { height: 604px; }

@media only screen and (max-width: 520px) { .fotoframe__sliderframe.portrait-height { height: 462px; } }

.fotoframe__frame { width: 100%; max-width: 400px; margin: auto; position: relative; text-align: center; }

.fotoframe__frame-item { transition: all 0.3s ease; transform: scale(0.9); opacity: 0.4; width: 280px; }

@media only screen and (max-width: 520px) { .fotoframe__frame-item { width: 200px; } }

.fotoframe__frame-item.slick-current { opacity: 1; width: 340px; transform: scale(1); }

@media only screen and (max-width: 520px) { .fotoframe__frame-item.slick-current { width: 260px; } }

.fotoframe__frame-img { max-width: 100%; }

.fotoframe__frame-scrollnav { position: absolute; width: 100%; top: 50%; margin-top: -22px; }

.fotoframe__frame-scrollnav button { width: 44px; height: 44px; border-radius: 50%; text-align: center; }

.fotoframe__frame-scrollnav--next { position: absolute; right: -48px; }

@media only screen and (max-width: 520px) { .fotoframe__frame-scrollnav--next { right: 0; } }

.fotoframe__frame-scrollnav--prev { position: absolute; left: -48px; display: none; }

@media only screen and (max-width: 520px) { .fotoframe__frame-scrollnav--prev { left: 0; } }

.fotoframe__frame-wrap { margin-bottom: 64px; }

.fotoframe__frame-border { padding: 12px; display: inline-block; }

@media only screen and (max-width: 320px) { .fotoframe__frame-border { padding: 0; } }

.fotoframe__frame-imgframe { width: 300px; margin-left: auto; margin-right: auto; position: relative; background: #fff; }

.fotoframe__frame-imgframe.square { height: 300px; }

.fotoframe__frame-imgframe.portrait { height: 533px; }

.fotoframe__frame-imgframe .cr-slider-wrap { display: none; }

.fotoframe__btn { font-family: "Montserrat-FF",Arial, Tahoma, sans-serif; font-weight: 500; border-radius: 4px; padding: 10px; text-align: center; width: 100%; font-size: 12px; margin-left: 12px; display: flex; align-items: center; justify-content: center; }

.fotoframe__btn .icon { margin-left: 8px; }

.fotoframe__btn:hover { cursor: pointer; }

.fotoframe__btn-wrap { display: flex; }

.fotoframe__btn-wrap--center { justify-content: center; }

.fotoframe__btn--lg { padding: 20px 0; }

.fotoframe__btn--sm { flex: 80px 0 0; }

.fotoframe__btn--sm .icon { margin: 0; }

.fotoframe__btn--link { border: none !important; }

@media only screen and (max-width: 520px) { .fotoframe__btn--link { background: none !important; } }

.fotoframe__btn--link-underscore { text-decoration: underline; }

.fotoframe__btn--link-underscore:hover { background: none !important; color: inherit !important; }

.fotoframe__btn:first-child { margin-left: 0; }

.fotoframe__btn--lefticon .icon { margin-left: 0; margin-right: 8px; }

.fotoframe__page { display: inline-block; width: 100%; vertical-align: top; }

.fotoframe__page.toleft { position: absolute; left: -1000%; }

.fotoframe__footer { display: flex; }

.fotoframe__footer--column { flex-direction: column; }

.fotoframe__footer--column button { margin-left: 0; }

.fotoframe__modal { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); z-index: 10; transition: all 0.3s ease; }

@media only screen and (max-width: 520px) { .fotoframe__modal { position: fixed; } }

.fotoframe__modal.active { display: block; }

.fotoframe__modal-btn { position: absolute; bottom: 0; width: 100%; padding: 26px; display: flex; flex-direction: column; }

.fotoframe__modal-btn button { margin-top: 12px; margin-left: 0; padding: 16px 0; }

.fotoframe__modal-btn button i { font-size: 16px; }

.fotoframe__modal-btn button:first-child { margin-top: 0; }

.fotoframe__modal--center { align-items: center; justify-content: center; }

.fotoframe__modal--center.active { display: flex; }

.fotoframe__modal-content { width: 380px; border-radius: 16px; background: #fff; padding: 16px; }

@media only screen and (max-width: 520px) { .fotoframe__modal-content { width: 90%; } }

.fotoframe__modal-content button { margin-left: 0; }

.fotoframe__info { font-size: 14px; margin: 16px 0; white-space: normal; text-align: center; }

.fotoframe__copytag { padding: 12px 20px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; }

@media only screen and (max-width: 520px) { .fotoframe__copytag { margin-left: 24px; margin-right: 24px; flex-direction: column; } }

@media only screen and (max-width: 320px) { .fotoframe__copytag { margin: 0; } }

.fotoframe__copytag-input { background: transparent; border: none; flex-grow: 1; font-family: "Montserrat-FF",Arial, Tahoma, sans-serif; }

.fotoframe__copytag-input:focus { outline: none; }

@media only screen and (max-width: 520px) { .fotoframe__copytag-input { text-align: center; margin-bottom: 12px; } }

.fotoframe__copytag button { border-radius: 4px; padding: 8px; text-transform: uppercase; }

.fotoframe__copytag .tooltip { position: relative; display: inline-block; }

.fotoframe__copytag .tooltip .tooltiptext { visibility: hidden; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; font-size: 12px; }

.fotoframe__copytag .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

.fotoframe__detail-text { font-size: 14px; line-height: 20px; font-weight: normal; white-space: normal; }

.fotoframe__detail-text p { font-size: 14px; line-height: 20px; }

.fotoframe__detail-text h3 { font-size: 16px; }

.fotoframe__detail-text ol { margin: 20px 0; padding-left: 20px; }

.fotoframe__detail-text ol li { margin-bottom: 15px; }

.fotoframe__detail-text ol li:last-child { margin-bottom: 0; }

.fotoframe__choice { width: 180px; margin: 0 6px; display: flex; padding: 12px; border-radius: 4px; border: 1px solid transparent; transition: all 0.3s ease; }

@media only screen and (max-width: 520px) { .fotoframe__choice { padding: 12px 6px; width: 100%; } }

.fotoframe__choice:hover, .fotoframe__choice--active { cursor: pointer; }

.fotoframe__choice-text { margin-left: 12px; font-size: 14px; }

@media only screen and (max-width: 520px) { .fotoframe__choice-text { margin-left: 6px; } }

.fotoframe__choice-info { font-size: 12px; font-weight: normal; padding-top: 4px; }

.croppie-container .cr-viewport, .croppie-container .cr-resizer { box-shadow: none; }

.croppie-container .cr-viewport { border-color: transparent; }

.cr-image { position: relative; }

.cr-slider { width: 100%; font-family: fotoframeicon; font-size: 18px; color: #333; }

.cr-slider:before { content: "\e905"; width: 20px; height: 20px; margin-right: 8px; }

.cr-slider:after { content: "\e904"; width: 20px; height: 20px; margin-left: 8px; }

.cr-slider-wrap { width: 100%; }

.upload-foto .upload-result, .upload-foto .cr-slider-wrap, .upload-foto.ready .upload-msg { display: none; }

.upload-foto.ready .upload-foto-wrap, .upload-foto.ready .cr-slider-wrap { display: block; }

.upload-foto.ready .upload-result { display: inline-block; }

.action { word-wrap: normal; position: relative; }

.action__rotate { position: absolute; right: 48px; top: -22px; z-index: 10; }

.action__rotate-btn { border: none; background: none; font-size: 18px; }

.foto-frame { width: 300px; position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; }

.result { margin-left: 20px; }

.ads-slot { text-align: center; }

.ads-slot img { max-width: 100%; }

.radio-input { display: flex; margin-top: 4px; }

.radio-input input { opacity: 0; width: 0; height: 0; }

.radio-input input + .radio-input__control::before { content: ""; width: 6px; height: 6px; border-radius: 50%; transition: 180ms transform ease-in-out; transform: scale(0); }

.radio-input input:checked + .radio-input__control::before { transform: scale(1); }

.radio-input__control { display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; transform: translateY(-0.05em); }