/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
ul{list-style:none}
button,input,select{margin:0}
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
img,video{height:auto;max-width:100%}
iframe{border:0}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}

/* Vars */

:root
{
	--grotesk-reg: 400 16px "roc-grotesk", sans-serif;
	--grotesk-bold: 600 16px "roc-grotesk", sans-serif;
	--grotesk-extrabold: 700 16px "roc-grotesk", sans-serif;
	--grotesk-heavy: 900 16px "roc-grotesk", sans-serif;

	--grotesk-wide-light: 300 16px "roc-grotesk-wide", sans-serif;
	--grotesk-wide-reg: 400 16px "roc-grotesk-wide", sans-serif;
	--grotesk-wide-black: 800 16px "roc-grotesk-wide", sans-serif;

	--white: #fff;
	--black: #111;
	--blue: #090580;
	--blue2: #46458b;
	--pink: #e7a8a8;
	--pink2: #f3d2d2;

	--email-padd: 25px;

	--btn-dim: 50px;
}

/* Styles */

* { font: var(--grotesk-reg); }
strong { font: var(--grotesk-bold); }
html, body { height: 100vh; }

#blueCtr { background: var(--blue); transition: all .5s; }
#pinkCtr { background: var(--pink2); transition: all .5s; }

h1 { color: var(--pink); font: var(--grotesk-wide-black); line-height: 1.0; margin-bottom: 50px; transition: font-size .5s; cursor: default; }
h1 > #rotate { display: block; position: relative; transition: font-size .5s; }
h1 > #rotate .word { display: block; position: absolute; top: 0; overflow: hidden; }
h1 > #rotate .word > span { transform: translateY(120%); font: var(--grotesk-wide-light); display: inline-block; transition: font-size .5s; }
h1 > #rotate .word > span.appear { transform: translateY(0%); transition: transform 1.2s cubic-bezier(0.25,1,0.5,1), font-size .5s; }
h1 > #rotate .word > span.disappear { transform: translateY(-120%); transition: transform 1.2s cubic-bezier(0.25,1,0.5,1), font-size .5s; }

#emailCtr { background: var(--white); border-radius: 10px; }

#emailFakeButtons { height: 40px; position: relative; }
#emailFakeButtons > div { background: #ae434b; box-shadow: -20px 0 0 #f6921e, -40px 0 0 #8bc53f; border-radius: 100px; width: 12px; height: 12px; position: absolute; right: 26px; top: 14px; }

#emailMetas { background: var(--pink); color: var(--white); padding: var(--email-padd); }
#emailAd { background: #ccc; padding: var(--email-padd); }

#emailContent { padding-bottom: var(--email-padd); }
#emailContent #ad {  }
#emailContent #fakeContent { padding: calc(var(--email-padd) * 2)  calc(var(--email-padd) * 2) 0  calc(var(--email-padd) * 2); }
#emailContent #fakeContent p { font-size: 18px; line-height: 1.4; } #emailContent #fakeContent p + p { margin-top: 10px; }
#emailContent #sign {  }

#emailContent #generateButton { position: relative; top: var(--btn-dim); font: var(--grotesk-wide-black); padding: 0 var(--email-padd); transition: all .2s; cursor: pointer; font-size: 26px; height: var(--btn-dim); border-radius: var(--btn-dim); text-align: center; line-height: calc(var(--btn-dim) + 5px); display: inline-block; background: var(--blue); color: var(--pink); }
#emailContent #generateButton:hover { transform: scale(1.05); }

.button { transition: all .2s; font: var(--grotesk-extrabold); font-size: 1.05vw; padding: 0 var(--email-padd); cursor: pointer; height: var(--btn-dim); border-radius: var(--btn-dim); text-align: center; line-height: calc(var(--btn-dim) + 5px); display: inline-block; background: var(--blue2); color: var(--pink); }
.button:hover { color: var(--blue2); background: var(--pink2); }
.button.active { color: var(--blue); background: var(--pink); }
.button.formButton { font: var(--grotesk-wide-reg); font-size: 1.05vw; line-height: calc(var(--btn-dim) + 5px); }
.button.basic { background: none; border: 2px solid var(--blue2); line-height: var(--btn-dim); }
.button.basic:hover { border: 2px solid var(--pink2); color: var(--pink2); }
.button i { font-size: 120%; position: relative; top: 4%; margin-right: 5px; }
.button .info { opacity: 0.8; font-size: 70%; position: relative; top: -2px; } .button .info i { font-size: 80%; margin-left: 4px; position: relative; top: 0px; }

.iconSelector { display: flex; justify-content: space-evenly; align-items: center; background: var(--blue2); color: var(--pink); padding: 0 var(--email-padd); height: var(--btn-dim); border-radius: var(--btn-dim); }
.iconSelector i { font-size: 120%; cursor: pointer; background: var(--blue); padding: .4vw; border-radius: var(--btn-dim); }

.iconSelectorCtr > .iconSelectorInput, .iconSelectorCtr > .iconSelector { position: absolute; top: 0; left: 0; width: 100%; transition: all .4s; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.iconSelectorCtr > .iconSelectorInput { transform: perspective(1200px) rotateX(0deg); z-index: 2; }
.iconSelectorCtr.active > .iconSelectorInput { transform: perspective(1200px) rotateX(-180deg); z-index: 1; }
.iconSelectorCtr > .iconSelector { transform: perspective(1200px) rotateX(180deg); z-index: 1; }
.iconSelectorCtr.active > .iconSelector { transform: perspective(1200px) rotateX(0deg); z-index: 2; }

.iconSelectorCtr.active label, .iconSelectorCtr.active .button.repeaterDelete { opacity: 0; }

.iconSelectorCtr .button.repeaterDelete { transform: scale(.7); width: auto; position: absolute; top: 0; right: 0; }
.iconSelectorCtr .button.repeaterDelete i { margin: 0; }

.repeaterBtnCtr { text-align: center; padding-top: 1vw; }

form .legend { color: var(--pink); font: var(--grotesk-wide-reg); font-size: 1vw; }
form .fields .field { position: relative; }

form .legend + .fields { margin-top: 20px; }
form .fields + .legend { margin-top: 30px; }
form .fields + .fields { margin-top: 15px; }

form .field input, form .field .button { width: 100%; }

label { transition: all .3s; transform-origin: top left; color: var(--pink); font: var(--grotesk-bold); position: absolute; top: 0; left: 0; height: var(--btn-dim); border-radius: var(--btn-dim); line-height: var(--btn-dim); padding: 0 var(--email-padd); }
input { transition: all .3s; outline: none; background: var(--white); color: var(--blue); padding: 0 var(--email-padd); font: var(--grotesk-reg); height: var(--btn-dim); border-radius: var(--btn-dim); border: 0; }
input:focus + label, input.notEmpty + label { background: var(--blue); transform: translate(20px, -12px) scale(0.7); height: calc(var(--btn-dim) / 1.5); line-height: calc(var(--btn-dim) / 1.5); }
input.notEmpty { background: var(--pink2); }

.hidden { display: none; }

/* Sign */

#sign, #sign * { color: #111; font-family: 'arial', sans-serif !important; }
#sign .rowHidden, #sign .signHidden { display: none; }

/* Responsive */

@media screen and (min-width: 1640px)
{
	h1, h1 > #rotate, h1 > #rotate .word > span { font-size: 3.5vw; }

	#mainCtr { display: flex; height: 100%; }
	#blueCtr, #pinkCtr { overflow: auto; padding: 3.5vw; }
	#pinkCtr > .content { display: flex; justify-content: center; align-items: center; min-height: 100%; }

	#blueCtr { min-width: 40%; }
	#pinkCtr { min-width: 60%; background: no-repeat center right / cover url('abstract-paper-background-concept.jpg'); }

	#emailCtr { max-width: calc(728px + 50px); }

	form .fields { display: flex; justify-content: space-between; }
	form .fields.one .field { width: 100%; }
	form .fields.two .field { width: 49%; }
	form .fields.three .field { width: 32%; }
	form .fields.three .field.twoThird { width: 66%; }
}

@media screen and (min-width: 1280px) and (max-width: 1639px)
{
	h1, h1 > #rotate, h1 > #rotate .word > span { font-size: 2.5vw; }

	#mainCtr { display: flex; height: 100%; }
	#blueCtr, #pinkCtr { overflow: auto; padding: 3.5vw; }
	#pinkCtr > .content { display: flex; justify-content: center; align-items: center; min-height: 100%; }

	#blueCtr { min-width: 30%; }
	#pinkCtr { min-width: 70%; background: no-repeat center right / cover url('abstract-paper-background-concept.jpg'); }

	#emailCtr { max-width: 790px; }

	form .fields {  }
	form .fields.one .field, form .fields.two .field { width: 100%; }, form .fields.three .field { width: 100%; }
	form .field + .field { margin-top: 15px; }
}

@media screen and (min-width: 860px) and (max-width: 1279px)
{
	h1, h1 > #rotate, h1 > #rotate .word > span { font-size: 5vw; }
	h1 br { display: none; }

	#blueCtr, #pinkCtr { overflow: auto; padding: 5vw; } #pinkCtr { padding: 8vw 5vw 10vw 5vw; }

	form .fields { display: flex; justify-content: space-between; }
	form .fields.one .field { width: 100%; }
	form .fields.two .field { width: 49%; }
	form .fields.three .field { width: 32%; }
	form .fields.three .field.twoThird { width: 66%; }

	form .legend { font-size: 2vw; }
	.button, .button.formButton { font-size: 2vw; }

	#pinkCtr { background: no-repeat center right / cover url('abstract-paper-background-concept.jpg'); }
	#emailCtr { width: 790px; margin: 0 auto; }
}

@media screen and (max-width: 859px)
{
	h1, h1 > #rotate, h1 > #rotate .word > span { font-size: 8vw; }
	h1 br { display: none; }

	#blueCtr, #pinkCtr { overflow: auto; padding: 5vw; }

	form .fields {  }
	form .fields.one .field, form .fields.two .field { width: 100%; }, form .fields.three .field { width: 100%; }
	form .field + .field { margin-top: 15px; }

	form .legend { font-size: 4vw; }
	.button, .button.formButton { font-size: 3vw; }

	#emailCtr { width: 790px; }
}