/* Сброс */
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, small, strike, strong, sub, sup, tt, var, b, u, i, center, 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 { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline } 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 }
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block; }

html { min-height: 100%; position: relative; }
html, html a {
	-webkit-font-smoothing: antialiased;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
body {
  animation: background 4s infinite alternate;
  	font: 22px Avenir-Medium, Helvetica, Arial sans-serif;
	color: #DFDFDF;
}

@keyframes background {
  0% {
    background: #642982;
  }
    100% {
    background: #a70f8d;
  }
}


.head { margin-bottom: 40px; text-align: left; }
.offpage { margin: 8% auto 0 auto; padding: 0 4%; }
.logo { text-align: center; }
	.logo > img { width: 400px; vertical-align: top; }
.wrap { text-align: center; }
	.wrap > .title { font: 63px Avenir-Heavy; display: block; margin: 3% 0 2% 0; text-shadow: 0 0 30px rgb(255 255 255 / 25%); line-height: 1; }
.reason { line-height: 1; }
.smile { font-size: 60px; margin: 30px 0; opacity: 0.7; }


@media only screen and (max-width : 992px) {
	.offpage { margin: 15% auto 0; font-size: 18px; }
	.wrap > .title { font-size: 42px; margin: 4% 0 4% 0; }
	.logo > img { width: auto;}
	.reason { padding: 5% 10%; }
}

@media only screen and (max-width : 576px) {
	.smile { font-size: 30px; }
	.wrap > .title { margin: 15% 0 4% 0; font-size: 36px; }
}