@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { /* small, strike, strong, sub, sup, tt, var, b, u, i, center,*/
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* CSS Document */
a {
	text-decoration: none;
	color: #D71912;
	outline: none !important;
}
a:hover {
	color: #D71912;
	text-decoration: underline;
}
html {
	height: 100%;
	white-space: normal;
}
body {
	background:#FAEEE1;
	margin: 0px;
	padding: 0px;
	text-align: center;
	word-wrap: break-word;
	outline: none;
	min-height: 100%;
}

.clearfix:after { /* FF, IE8, O, S, etc. */
	    content: ".";
	    display: block;
	    height: 0;
	    clear: both;
	    visibility: hidden;
}
img {display/*\**/: block; margin/*\**/: 0 auto; max-width: 100%; }


@font-face {
  font-family: "Dr Oetker Moments Text";
  font-style: normal;
  font-weight: 400;
  src: local("☺"), 
  	url("../_fonts/DrOetkerMoments/DrOetkerMomentsTextW05-Rg.woff") format("woff"),
 	url("../_fonts/DrOetkerMoments/DrOetkerMomentsTextW05-Rg.woff2") format("woff2");
}
@font-face {
  font-family: "Dr Oetker Moments Display";
  font-style: normal;
  font-weight: 400;
  src: local("☺"), 
  	url("../_fonts/DrOetkerMoments/DrOetkerMomentsDisplayW05.woff") format("woff"),
 	url("../_fonts/DrOetkerMoments/DrOetkerMomentsDisplayW05.woff2") format("woff2");
}
@font-face {
  font-family: "Dr Oetker Moments Display";
  font-style: normal;
  font-weight: 600;
  src: local("☺"), 
  	url("../_fonts/DrOetkerMoments/DrOetkerMomentsDispW05-Md.woff") format("woff"),
 	url("../_fonts/DrOetkerMoments/DrOetkerMomentsDispW05-Md.woff2") format("woff2");
}
@font-face {
  font-family: "Dr Oetker Moments Display";
  font-style: normal;
  font-weight: 800;
  src: local("☺"), 
  	url("../_fonts/DrOetkerMoments/DrOetkerMomentsDispW05-Bd.woff") format("woff"),
 	url("../_fonts/DrOetkerMoments/DrOetkerMomentsDispW05-Bd.woff2") format("woff2");
}
@font-face {
  font-family: "Dr Oetker August Script";
  font-style: normal;
  src: local("☺"), 
  	url("../_fonts/DrOetkerAugustScript/DrOetkerAugustsScriptW05-Rg.woff") format("woff"),
 	url("../_fonts/DrOetkerAugustScript/DrOetkerAugustsScriptW05-Rg.woff2") format("woff2");
}

/*  */




html {height: 100%;-webkit-text-size-adjust:none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
body {margin:0; padding:0; background-color:transparent/*#DFD7CD*/; color:#1e4896; font-size:13px; line-height:1.25; 
	font:16px/1.231 "Dr Oetker Moments Display",arial,helvetica,clean,sans-serif; text-align:center; font-weight:400;}
h1{font-family: "Dr Oetker Moments Display", arial, helvetica, clean, sans-serif; padding:0; text-align:left; color:inherit; font-weight:800; text-transform:uppercase;}
h2, h3 {font-family: "Dr Oetker Moments Display", arial, helvetica, clean, sans-serif; padding:0; text-align:inherit; color:inherit; font-weight:800;}
h1 {padding: 0;margin: 0;font-size:3em;	margin-bottom:0.25em;line-height: 100%;font-weight: normal;color:inherit;}
h2 {font-size:2.5em; margin: 0 0 0.5em 0; color:inherit;}
h3 {font-size:1.75em; margin: 0 0 0.5em 0; color:inherit;}
p {font-size:1em; margin: 0 0 0.5em 0; color:inherit;}

body.loading:after {content:""; position:fixed; width: 100%; height:100vh; left:0; top:0; background: rgba(255,255,255,0.9) url(./images/loader.gif) 50% 50% no-repeat; transition: all 1s linear;}


input,select{font-family:"Dr Oetker Moments Text",arial,helvetica,clean,sans-serif;}
.script-font {font-family:"Dr Oetker August Script",cursive; text-transform: none; font-weight:normal;}
.uc-font {text-transform:uppercase;}

.red-txt{color:#DF002B;}
.blue-txt{color:#1e4896;}

.clear {clear: both;font-size: 0px;height: 0px;line-height: 0px;}
.clear:after {content: ".";display: block; height: 0;  clear: both;  visibility: hidden;}
.clear {zoom: 1;}
* html .clear {height: 1%;}
.vspacer2 {height: 14px;}
.justifier {width:100%;display:inline-block; position:relative; vertical-align:middle;height:0;}

.inlineBlock {position: relative; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline;}
.inlineBlock.middle { vertical-align: middle; }
.inlineBlock.top { vertical-align: top; }
.inlineBlock.bottom { vertical-align: bottom; }


#oC {position: relative; text-align: center; min-height:200px; margin:0; padding: 0; }

#oC_inner {
	position:relative; 
	background-color: #b1ded4; 
	text-align:center;  
	padding: 2em;
	margin-top:10px;
}

#gC {position:relative; overflow:hidden; width:auto; margin:0 auto;}

#headline1 {font-family: "Dr Oetker Moments Display", arial, helvetica, clean, sans-serif;  font-size:2.5em; color:#1e4896; 
padding:1em 0 0 0; text-align:center; font-weight:800; text-transform:uppercase; line-height:1;}
#headline2 {font-family: "Dr Oetker Moments Display", arial, helvetica, clean, sans-serif; font-size:1.25em; color:#1e4896; 
padding:1em 0 2em 0; text-align:center; font-weight:400;}


.btn1 {background-color: #D71912;color: #fff !important;text-decoration: none !important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 
border-radius: 3px;
padding: 5px 15px;border: 0px none #fff;margin: 0;-webkit-appearance: none;
line-height:100%; cursor: pointer; width: auto; height: auto;
position: relative; display: inline-block; vertical-align: middle;
font-family: "Dr Oetker Moments Display", arial, helvetica, clean, sans-serif;  font-size:138.5%; font-weight:  600;
}
.btn1:focus, .btn1:active, .btn1:hover {background-color: #ED2D27; color: #fff !important; text-shadow: none; text-decoration: none !important;}


/* form */ 
.inputtextfield {
	position: absolute; 
	z-index:auto;
	display:block;
	text-align:center;
	font-weight: normal;
	line-height: normal;
	color: #1e4896;
	margin: 0;
	padding: 0em;
	background: none;
	background-color: transparent;
	width: 100%;
	font-family: inherit;
	height: auto;
	border: 0 none #fff;
	box-sizing: border-box;
	-webkit-appearance: none;
}

.butalike {
	font-family:"Dr Oetker Moments Display",arial,helvetica,clean,sans-serif;
	
	vertical-align: middle;
    position: relative;
    display: inline-block;
    font-size: 1.5em;
    line-height: 1em;
    margin: 0.125em 0;
    padding: 0.75em 1em;
    height: auto;
    font-weight: 800;
    cursor: pointer;
    border: 0px none #fff;
    text-transform: uppercase;
    box-sizing: border-box;
    -webkit-appearance: none;
    background: #1e4896;
	border-radius:0.25em;
    color: #fff;
}
.butalike.red {
	background: #DF002B;
}
.butalike.smaller {font-size:1em; padding:0.5em 1em;}
.butalike:hover, 
.butalike:focus {
	color:#fff;
	text-decoration:none;
	background: #DF002B;
}
.butalike.red:hover, 
.butalike.red:focus {
	color:#DF002B;
	text-decoration:none;
	background: #fff;
}



.errors {
	border: 1px solid #D71912;
	color: #FFFFFF;
	margin: 0px 0px 5px 0px;
	padding: 1px 3px 2px 3px;
	background-color: #D71912;
}
.errors * {
	color: #FFFFFF;
} 
.error_color {
	color: #D71912;
}
.errors a {
	color: #FFFFFF;
}
.errors a:hover {
	color: #FFFFFF;
}

.action_message {
	margin: 0px 0px 5px 0px;
	padding: 0.5em;
	background-color: #fff;
	border-radius: 6px;
}


.steps {max-width: 100%; margin: 0 auto; position:relative; height: 10em; text-align: center; }
.step-container { display: inline-block; vertical-align: top; width: 24%; }
.step {position:relative;display:inline-block;vertical-align:middle;margin:0;height:1.5em;width:1.5em;line-height:1em;padding: 1em;
background-color:#1e4896;color:#fff;border-radius:2em;box-shadow:2px 2px 4px 0px rgba(0,0,0,0.3); text-align:center;}
.step-number {font-size:2em; line-height: 0.85em; color: #fff !important; font-weight:800; }
.step-info {display:block;position:absolute;width:200px;width:16vw;left:-7vw;top:0; margin-left:1em; margin-top:4em; text-align:center; 
 color:#1e4896; font-size:1em; line-height: normal;}

.deco-title { position:relative;padding: 0 1em;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.section {position:relative; min-height:200px; padding: 0 1em; 
	max-width: 1080px; 
	margin: 0 auto 2em auto;
}
.section-header {position:relative;display:block; height:53px; width: 10em; margin: 0 auto 1em 38px; top: 0em;}
.section-header-left {position:absolute;right:100%;margin-right:20px;z-index:auto; width:38px;height:44px;
background: transparent url(images/section_header_left.png) 100% 0 no-repeat; background-size:100% 100%;}
.section-header-right {display: none;
position:absolute;left:100%;margin-left:20px;z-index:auto; width:38px; height:44px;
background: transparent url(images/section_header_right.png) 100% 0 no-repeat; background-size:100% 100%;}
.section-header-middle {position:absolute;top:0px;left:-30px;right:0px;width:auto;height:44px;font-size:1.5em;line-height:1;padding:10px 20px 0px 0px; box-sizing: border-box;
color:#fff;font-weight:800;text-transform:uppercase; background-color:#DF002B;}

.label {font-size:1.25em; text-transform: uppercase; font-weight:800; color:#1e4896;}

.colorsContainer {position:relative; margin:0 auto 2em auto; text-align:justify; line-height:100%; max-width: 960px;}
.colorsContainer .label {display:block;position:relative;text-align:left;margin-bottom:0.75em;}
.colorsContainer .colors {display:block;position:relative;text-align:justify;line-height:0;}
.colorsContainer .colors .color {display:inline-block; box-sizing:border-box;position:relative;vertical-align:middle;width:11%;margin:2px 0 2px 0; height:30px; cursor:pointer; border:1px solid #999;}
.colorsContainer .colors .color.active {border:1px solid #DF002B;}

.patternContainer {position:relative; margin:0 auto 1em auto; text-align:justify; line-height:100%; max-width: 960px;}
.patternContainer .label {display:block;position:relative;text-align:left;margin-bottom:0.75em;}
.patternContainer .patterns {display:block;position:relative;text-align:justify;line-height:0;}
.patternContainer .pattern {display:inline-block; box-sizing:border-box;position:relative;vertical-align:middle;width:24%; padding:5px; text-align:center; margin:9px 0 1px 0; cursor:pointer;
background-color: #fff; border:1px solid #999;
}
.patternContainer .patterns .pattern.active {border:1px solid #DF002B;}


.imagesContainer {position:relative; margin:0 auto 1em auto; text-align:left; line-height:100%; max-width: 960px;}
.imagesContainer .label {display:block;position:relative;text-align:left;margin-bottom:0.75em;}
.imagesContainer .images {display:block;position:relative;text-align:left;line-height:0;}
.imagesContainer .image {display:inline-block; box-sizing:border-box;position:relative;vertical-align:middle;width:4%; padding:0; text-align:center; margin:9px 1% 1px 0%; cursor:pointer;
background-color: rgba(255,255,255,0.4); 
border:1px solid #999;
border-radius:50%; 
object-fit: contain;
}
.imagesContainer .image img.preview-img {position:absolute; left:50%; top:50%; width:auto; height:auto; transform:translate(-50%, -50%); display:block; margin:0; border-radius:50%; max-width:100%;  max-height:100%;}
.imagesContainer .image img.plchldr {position:relative; width:100%; height:auto; display:block; margin:0;}
.imagesContainer .images .image.active {border:1px solid #DF002B;background-color: #fff;}


.st0{fill:#FDEDF3;} /*bg*/
.st1{fill:#F8B4B5;} /*deco*/
.st2{fill:#DF002B; color:#DF002B;} /*logo*/
.st3{fill:#FFFFFF; color:#FFFFFF;} /*logo*/
.st4{fill:#001391; color:#001391;} /*logo*/
.st5{fill:none;}
.st6{font-size:11.5pt;}
.st7{font-family: "Dr Oetker Moments Display", arial, helvetica, clean, sans-serif;font-weight:600; text-transform:uppercase;}
.st8{fill:#1e4896; text-anchor:middle;}
.st8a{fill:#FFFFFF; text-anchor:middle;}
.st9{font-family:"Dr Oetker August Script", cursive;font-weight:400;}
.st10{fill:#DF002B; text-anchor:middle;}
.st10a{fill:#FFFFFF; text-anchor:middle;}


.inputtextfield.st6 {font-size:42px;}
.inputtextfield.st8, .inputtextfield.st8a {line-height:52px;padding:0; height:52px;color:#1e4896; outline:none;}
.inputtextfield.st10, .inputtextfield.st10a {line-height:58px;padding:0; height:58px;color:#DF002B; outline:none;}
.inputtextfield.st8a, 
.inputtextfield.st10a{color:#FFFFFF;}

#Eticheta_preview_2023 .st6 {font-size:7.32pt;}
#Eticheta_preview_2023 .inputtextfield.st6 {font-size:25px;}
#Eticheta_preview_2023 .inputtextfield.st8, 
#Eticheta_preview_2023 .inputtextfield.st8a {line-height:32px;padding:0; height:32px;color:#1e4896; outline:none;}
#Eticheta_preview_2023 .inputtextfield.st10,
#Eticheta_preview_2023 .inputtextfield.st10a {line-height:36px;padding:0; height:36px;color:#DF002B; outline:none;}
#Eticheta_preview_2023 .inputtextfield.st8a, 
#Eticheta_preview_2023 .inputtextfield.st10a{color:#FFFFFF;}

.inputtextfield.st8a::-webkit-input-placeholder {color: #eee;}
.inputtextfield.st8a::-moz-placeholder {color: #eee;}
.inputtextfield.st8a:-ms-input-placeholder {color: #eee;}
.inputtextfield.st8a:-moz-placeholder {color: #eee;}
.inputtextfield.st10a::-webkit-input-placeholder {color: #eee;}
.inputtextfield.st10a::-moz-placeholder {color: #eee;}
.inputtextfield.st10a:-ms-input-placeholder {color: #eee;}
.inputtextfield.st10a:-moz-placeholder {color: #eee;}


#Eticheta_preview, #Eticheta_preview_2023, #Capison_preview {position:relative;display:block; width:660px; margin:10px auto; max-width:100%; text-align:center; background-color: #fff; border:1px solid #999; padding:0px;}
#Capison_preview {cursor:pointer;}
#Eticheta_preview_2023 { width:420px;}
#Eticheta_finala, #Eticheta_finala_2023, #Capison_final {position:relative; z-index:auto;display:block;margin:20px;}
.downloadEticheta, .downloadCapison {position:relative;display:block; width:100%; max-width:360px; margin:10px auto;}
/*.downloadCapison {position:absolute;display:block; width:80%; left:10%; top:50%; margin-top:-2em;}*/
@media screen and (max-width:767px) { 
#oC {margin:0; margin-bottom: 2em}
.steps{font-size:0.85em;}
.step-info{font-size:0.92em;}
.section { margin-bottom: 4em;  box-shadow: none; }
.section-header {margin-left: 19px;height:30px;}
.section-header-left {top:0;margin-right:10px;width:19px; height:30px;}
.section-header-right {top:0px;margin-left:10px;width:19px; height:30px;}
.section-header-middle {left:-15px;right:0px;height:30px;font-size:1.25em;padding:4px 10px 0px 0px;}
.imagesContainer .images { width: 100vw; overflow: auto; box-sizing:border-box; white-space: nowrap; margin-left:-1em; margin-right:-1em; padding-left:1em; padding-right:3em;}
.imagesContainer .image {width:13%;}
}
@media screen and (max-width:585px) {
	.steps { position: relative; overflow: hidden; height: auto; }
	.step-container { width: 49%; height: 10em; }
	.step-info { width: 35vw; left: -14vw; }
}
@media screen and (max-width:479px) {
	#oC_inner { padding: 1em 0; }
	.step-info{font-size:0.85em;}
	.imagesContainer .image {width:18%;}
	#Eticheta_preview {width:280px;}
	#Eticheta_preview_2023 {width:280px;}
	#Eticheta_finala,
	#Eticheta_finala_2023, #Capison_final {margin:5px;}
	.inputtextfield.st8, .inputtextfield.st8a {font-size:11px;}
	.inputtextfield.st10, .inputtextfield.st10a {font-size:11px;}
	#Capison_preview {width:100%;}
}