@font-face { font-family: 'Myriad Pro'; src: url("../fonts/MyriadPro-Bold.woff2") format("woff2"), url("..fonts/MyriadPro-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-stretch: normal; unicode-range: U+0020-04D9; }
@font-face { font-family: 'Myriad Pro'; src: url("../fonts/MyriadPro-Regular.woff2") format("woff2"), url("..fonts/MyriadPro-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-stretch: normal; unicode-range: U+0020-04D9; }
@font-face { font-family: 'Avenir Next Condensed'; src: url("../fonts/Avenir Next Condensed Bold.woff2") format("woff2"), url("..fonts/Avenir Next Condensed Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-stretch: condensed; unicode-range: U+0020-00FE; }
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/* Sections ========================================================================== */
/** Remove the margin in all browsers. */
body { margin: 0; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content ========================================================================== */
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics ========================================================================== */
/** Remove the gray background on active links in IE 10. */
a { background-color: transparent; }

/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Remove the border on images inside links in IE 10. */
img { border-style: none; }

/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** Correct the inability to style clickable types in iOS and Safari. */
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Correct the padding in Firefox. */
fieldset { padding: 0.35em 0.75em 0.625em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */
[type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive ========================================================================== */
/* Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Misc ========================================================================== */
/** Add the correct display in IE 10+. */
template { display: none; }

/** Add the correct display in IE 10. */
[hidden] { display: none; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html { height: 100%; }

.body { height: 100%; font-family: "Myriad Pro"; font-weight: 700; color: #5b5b5b; }

.container { max-width: 1530px; padding: 0 15px; margin: auto; }

.content { padding-top: 65px; }

.content__text { padding: 93px 0; background: url("../img/cloud.svg") no-repeat center/contain; }

.content__title { font-family: "Avenir Next Condensed"; font-weight: 700; font-size: 5.125rem; color: #5b5b5b; text-transform: uppercase; text-align: center; margin: 0 0 28px; }

.content__subtitle { font-family: "Myriad Pro"; font-weight: 700; font-size: 1.75rem; color: #5b5b5b; text-transform: uppercase; text-align: center; margin: 0; }

.subscribe { height: 710px; padding-bottom: 50px; background: url("../img/background1.png") no-repeat center bottom; }

.subscribe__animals { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 515px; background: url("../img/background2.png") no-repeat left top; position: relative; }

.subscribe__cloud { display: block; font-weight: 700; text-align: center; opacity: 0; position: absolute; }

.subscribe__cloud--1 { width: 119px; height: 69px; padding-top: 18px; background: url("../img/cloud1.svg") no-repeat center; font-size: 1rem; left: 16%; top: 7%; -webkit-animation-name: fade; animation-name: fade; -webkit-animation-duration: 1s; animation-duration: 1s; }

.subscribe__cloud--2 { width: 87px; height: 51px; padding-top: 14px; background: url("../img/cloud2.svg") no-repeat center; font-size: 0.75rem; left: 30%; top: 3%; -webkit-animation-name: fade; animation-name: fade; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 2s; animation-delay: 2s; }

.subscribe__cloud--3 { width: 119px; height: 69px; padding-top: 18px; background: url("../img/cloud1.svg") no-repeat center; font-size: 1rem; left: 44%; top: 3%; -webkit-animation-name: fade; animation-name: fade; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 4s; animation-delay: 4s; }

.subscribe__cloud--4 { width: 87px; height: 51px; padding-top: 14px; background: url("../img/cloud2.svg") no-repeat center; font-size: 0.75rem; left: 59%; top: 6%; -webkit-animation-delay: 16s; animation-delay: 16s; -webkit-animation-name: fade; animation-name: fade; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 5s; animation-delay: 5s; }

.subscribe__cloud--5 { width: 119px; height: 69px; padding-top: 18px; background: url("../img/cloud1.svg") no-repeat center; font-size: 1rem; left: 72%; top: 4%; -webkit-animation-delay: 20s; animation-delay: 20s; -webkit-animation-name: fade; animation-name: fade; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 3s; animation-delay: 3s; }

.subscribe__cloud--6 { width: 87px; height: 51px; padding-top: 14px; background: url("../img/cloud2.svg") no-repeat center; font-size: 0.75rem; left: 85%; top: 11%; -webkit-animation-delay: 24s; animation-delay: 24s; -webkit-animation-name: fade; animation-name: fade; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; }

@-webkit-keyframes fade { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fade { 0% { opacity: 0; }
  100% { opacity: 1; } }
.subscribe__area { width: 100%; max-width: 485px; }

.subscribe__title { font-family: "Myriad Pro"; font-weight: 700; font-size: 1.375rem; color: #5b5b5b; text-align: center; margin: 0 0 15px; }

.subscribe__form { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; }

.subscribe__email { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 37px; padding: 0 15px; background: transparent; border: 1px solid rgba(91, 91, 91, 0.3); border-right: none; font-family: "Myriad Pro"; font-weight: 400; font-size: 0.875rem; color: #5b5b5b; outline: none; }

.subscribe__submit { padding: 0 28px; background: #d78d44; border: none; cursor: pointer; font-size: 0.875rem; color: #f5f0e9; outline: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.subscribe__submit:hover { background: #5b5b5b; }

.subscribe__social-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; list-style: none; margin: 0; }

.subscribe__social-item { margin: 0 2px; }

.subscribe__social-link { display: block; width: 37px; height: 37px; background-color: #5b5b5b; background-repeat: no-repeat; background-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.subscribe__social-link:hover { background-color: #d78d44; }

.subscribe__social-link--instagram { background-image: url("../img/instagram.svg"); }

.subscribe__social-link--linkedin { background-image: url("../img/linkedin.svg"); }

.subscribe__social-link--youtube { background-image: url("../img/youtube.svg"); }

.subscribe__social-link--behance { background-image: url("../img/behance.svg"); }

.subscribe__social-link--facebook { background-image: url("../img/facebook.svg"); }

.subscribe__social-link--twitter { background-image: url("../img/twitter.svg"); }

@media (max-width: 1400px) { .container { max-width: 1170px; }
  .content__title { font-size: 4rem; }
  .content { padding-top: 50px; }
  .content__text { padding: 62px 0; }
  .subscribe__animals { background-size: contain; }
  .subscribe__cloud--1 { left: 18%; top: 4%; }
  .subscribe__cloud--2 { left: 34%; top: 2%; }
  .subscribe__cloud--3 { left: 50%; top: 1%; }
  .subscribe__cloud--4 { left: 68%; top: 4%; }
  .subscribe__cloud--5 { left: 77%; top: 4%; }
  .subscribe__cloud--6 { left: 92%; top: 8%; } }
@media (max-width: 1199px) { .content__title { font-size: 3rem; margin: 0 0 15px; } }
@media (max-width: 1024px) { .body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
  .content__title { font-size: 2rem; }
  .content__subtitle { font-size: 1.5rem; }
  .subscribe { height: auto; background-size: cover; }
  .subscribe__cloud { display: none; } }
@media (max-width: 767px) { .content__title { font-size: 1.7rem; }
  .content__subtitle { font-size: 1rem; }
  .content__text { padding: 28px 0; }
  .subscribe__animals { height: 350px; } }
@media (max-width: 575px) { .content { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 0; }
  .content .container { margin-bottom: 0; }
  .content__text { max-width: 290px; padding: 31px 20px; background: url("../img/cloud-m.svg") no-repeat center/contain; margin-bottom: 45px; }
  .content__title { font-size: 1.625rem; margin: 0 0 5px; }
  .content__subtitle { font-size: 0.8125rem; }
  .subscribe { padding-bottom: 0; background: url("../img/background1-m.png") no-repeat center top/cover; }
  .subscribe__animals { height: 310px; background: url("../img/background2-m.png") no-repeat left top; position: relative; top: -30px; }
  .subscribe__title { font-size: 1rem; text-align: left; }
  .subscribe__form { margin-bottom: 20px; }
  .subscribe__social-list { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } }