/*! 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 {
    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 */
    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 {
    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"] {
    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;
  }
/* Global */
* {
    box-sizing: border-box;
}
body {
	font-family: 'Inter UI', sans-serif;
    letter-spacing: -0.03em;
}
a,
a:not(.btn):hover {
	text-decoration: none;
	color: #2F7DF6;
}
input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: 0;
}
[contenteditable=true] {
	cursor: text;
}
[contenteditable=true]:empty::before {
	content: attr(placeholder);
	color: rgba(0, 0, 0, 0.4)
}
.input--transparent {
	border: 0;
	background: none;
	outline: 0;
}
button {
	font-family: 'Inter UI', sans-serif;
	letter-spacing: -0.03em;
	padding: 1px 7px 2px; /* Chrome default values */
}
button:hover {
	cursor: pointer;
}
/* Loading indicator */
.loader {

}
.loader--with-background::after {
	content: '';
	position: fixed;
	left: 0;
	top: 48px;
	height: 100%;
	height: calc(100% - 48px);
	width: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1001;
}	
	.loader__content {
		position: fixed;
		left: 50%;
		top: 50%;
		text-align: center;
		z-index: 11;

		transform: translate(-50%, -50%);
	}
		.loader__img {
			width: 50px;
			height: 50px;
			display: block;
			margin: 0 auto;
		}
/* Buttons */
.btn {
	padding: 6px 24px;

	border: 1px solid #CCCCCC;
	border-radius: 3px;

	font-weight: bold;
	line-height: 15px;
	font-size: 12px;
	letter-spacing: -0.03em;
}
.btn:hover {
	cursor: pointer;
}
.btn:focus {
	outline: 0;
	box-shadow: none;
}
	/* BTN styles */
	.btn--primary {
		border-color: #2f7df6;
		background: #2f7df6;
		color: #fdfdfd;
	}
	.btn--secondary {
		color: #2f7df6;
		background: rgba(47, 125, 246, 0.08);
		border: 1px solid rgba(47, 125, 246, 0.28);		
	}
	.btn--light {
		background: #FFFFFF;
		border: 1px solid rgba(47, 125, 246, 0.28);
		color: #2f7df6;
	}
	.btn--unstyled {
		border: 0;
		outline: 0;
	
		background: none;
		text-transform: uppercase;

		text-shadow: 0px 8px 13px rgba(0, 0, 0, 0.08);
	}
		.btn--unstyled:focus {
			outline: 0;
			box-shadow: none;
		}
		.btn--unstyled-blue {
			color: #2F7DF6;
		}
		.btn--unstyled-dark {
			color: #767676;
		}
	.btn--danger {
		background: #EA6A6A;
		border: 1px solid #EA6A6A;
		border-radius: 2px;
		color: #FFFFFF;
	}
	.btn--warning {
		background: #F8CC46;
		border: 1px solid #E78C6C;
		border-radius: 2px;
		color: #000000;
	}
	.btn--uppercase {
		text-transform: uppercase;
	}
	/* BTN sizes */
	.btn--small {
		font-size: 10px;
	}
	.btn--medium {
		font-size: 10px;
	}
	.btn--large {
		padding: 13px;
		font-size: 13px;
	}
	.btn--xlarge {
		padding: 19px;
		border-radius: 5px;
		font-size: 16px;
	}
	/* BTN colours */
	.btn--dark {
		color: #767676;
	}
	.btn--add-new-animation {
		padding: 0;
		display: inline;
		border: 0;
		margin-left: 5px;
		position: absolute;
		left: 30px;
		top: 4px;
	}
		.btn--add-new-animation svg path {
			transition: 200ms;
		}
		.btn--add-new-animation svg rect {
			transition: 200ms;
		}		
		.btn--add-new-animation:hover svg path {
			fill: #fff;
		}
		.btn--add-new-animation:hover svg rect {
			fill: #2F7DF6;
		}	
	.btn--account-back-to-projects {
		float: left;
		padding-left: 25px;
		padding-right: 25px;		
	}	
.btn-icon {
	width: 36px;
	height: 22px;
	border: 1px solid #DDDDDD;
	box-sizing: border-box;
	border-radius: 4px;
	background: #fff;
}
.btn-icon:hover {
	cursor: pointer;
}
.btn + .btn {
	margin: 0 15px 0 0;
}
.btn--clean {
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
}
.btn-new-project {
    width: 100%;
    display: block;
    text-align: center;
    padding: 16px 0;
    font-size: 14px;
}

.btn--generate-animation-name {
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    left: -12px;
    top: 9px;
    padding: 0;
    padding-right: 13px;
    display: none;
}

.btn--disabled {
    cursor: none;
    min-width: 160px;
    float: right;
    margin: 0 !important;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: 49%;
    border-color: #CCCCCC;
    background: #E8E8E8;
    text-align: center;
    color: #B7B7B7;
}
.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.clear-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}
/* Header */
.header {
	padding: 45px 0;
}

/* Menu*/
.menu-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.menu-container > * {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.menu__link {
	font-family: 'Inter UI';
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.8125em;
	color: #2F7DF6;
	text-shadow: 0px 8px 13px rgba(0, 0, 0, 0.08);
}
.btn--header {
	display: inline-block;
	font-style: normal;
	font-weight: bold;
	font-size: 0.8125em;
	box-shadow: 0px 4px 15px rgba(68, 138, 247, 0.4);
	background: #2F7DF6;
	border: 1px solid #2F7DF6;
	box-sizing: border-box;
	border-radius: 5px;
	color: #fff;
	padding: 12px 24px;
}
.btn--download {
	background: rgba(47, 125, 246, 0.08);
	border: 1px solid rgba(47, 125, 246, 0.28);
	box-sizing: border-box;
	border-radius: 3px;
	color: #2F7DF6;
	font-size: 0.75em;
	padding: 17px 21px;
}

.section__title {
	font-family: Syne;
	font-size: 4.25em;
	line-height: 1.411;
	letter-spacing: -0.01em;
	color: #4D4D4D;
	margin: 0.2em 0 1em;
	font-weight: bold;
}
.section__desc {
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
}
.section__desc p {
	line-height: 1.75;
	margin: 1em 0 1.75em;
	color: #4D4D4D;
}

/* Section Getting Started video */
.start__video-inner {
	position: relative;
	overflow: hidden;
	border-radius: 13px;
	padding-top: 56.25%;
	max-width: 815px;
	margin: 0 auto;
}
.start__video-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.63);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	z-index: 2;
	cursor: pointer;
	transition: all 350ms ease;
}
#player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.start__video-layer.play {
	opacity: 0;
	visibility: hidden;
}
.start__video-ico {
	padding: 10px 15px 0 0;
}
.start__video-text {
	font-size: 1.625em;
}

/* Section Legal */
.legal-cont {
	max-width: 645px;
	margin: 0 auto;
}
.block {
	background: #FAFAFA;
	box-sizing: border-box;
	border-radius: 7px;
	padding: 20px 30px;
	color: #313131;
	font-size: 0.875em;
	line-height: 1.615;
	margin: 0 0 20px;
}
.block--inform {
	border: 1px solid #E78C6C;
	box-shadow: 0px 8px 13px rgba(231, 140, 108, 0.13), 0px 3px 5px rgba(231, 140, 108, 0.21);
}
.legal__item {
	padding: 24px;
	border-bottom: 1px solid #E0E0E0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	line-height: 1.4375em;
}
.legal__item:last-child {
	border-bottom: 0;
}
.legal__item p {
	margin: 0;
}
.underline {
	text-decoration: underline;
}

/* Section footer */
.footer {
	padding: 80px 0 50px;
}
.footer__desc {
	max-width: 450px;
	margin: 0 auto;
}
.footer__desc p {
	line-height: 1.4375em;
	margin: 1em 0 1.4375em;
}

@media screen and (max-width: 1200px) {
	
}
@media screen and (max-width: 700px) {
	.header {
		padding: 20px 0;
	}
	.menu-container > *{
		width: 100%;
		text-align: center;
		margin: 0 0 20px;
	}
	.section__title {
		font-size: 2em;
	}
}

@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
	.start__video-inner {
		padding-top: 41.25%;
	}
}


/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}
*:focus{
    outline: 0;
}
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
}
a{
    color: inherit;
    text-decoration: none;
    -webkit-transition: color 350ms ease-in-out;
    -o-transition: color 350ms ease-in-out;
    transition: color 350ms ease-in-out;
}
a:hover, a:active, a:focus {
   outline: 0;
}
p{
    margin: 0;
    font-size: 1.0625em;
    line-height: 1.7647;
    margin: 0 0 1.7647em;
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.caps{
    text-transform: uppercase;
}
.text-right{
    text-align: right;
}
.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
.privacy {
	background: #43479E linear-gradient(90deg, rgba(47, 123, 246, 0) 32.59%, #2F7BF6 42.07%, rgba(47, 125, 246, 0.16) 83.34%, rgba(47, 125, 246, 0) 100%);
	box-shadow: 0px 8px 13px rgba(67, 71, 158, 0.13), 0px 3px 5px rgba(67, 71, 158, 0.21);
	border-radius: 7px;
	padding: 13px 45px;
	color: #fff;
	font-size: 0.8125em;
	letter-spacing: 0.01em;
	position: fixed;
	left: 50%;
	bottom: 10px;
	z-index: 9;
	transform: translate(-50%, 0);
	max-width: 650px;
	min-width: 300px;
}
.privacy--hidden {
    display: none;
}
    .privacy p {
        margin: 0;
    }
    .privacy a {
        color: inherit;
        text-decoration: underline;
    }
    .privacy a:hover {
        color: inherit;
    }
    .privacy__close {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
    }
    .privacy__close:before, 
    .privacy__close:after {
        content: ' ';
        position: absolute;
        left: 50%;
        top: 50%;
        height: 14px;
        width: 1px;
        background-color: #fff;

    }
    .privacy__close:before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .privacy__close:after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
/* 
 * Input styles 
 */
/* Primary */
.is-primary {
    border: 1px solid #2F7DF6;
    color: #2F7DF6;
}
input.is-primary:focus {
    box-shadow: 0px 8px 13px rgba(47, 125, 246, 0.13), 0px 3px 5px rgba(47, 125, 246, 0.21);
}
/* Warning */
.is-warning {
    border: 1px solid #F8CC46;
    color: #F8CC46;
}
input.is-warning:focus {
    box-shadow: 0px 8px 13px rgba(248, 204, 70, 0.13), 0px 3px 5px rgba(248, 204, 70, 0.21);
}
/* Invalid or error */
input.is-invalid {
    border: 1px solid #EB5757;
    color: #EB5757;
}
input.is-invalid:focus {
    box-shadow: 0px 8px 13px rgba(235, 87, 87, 0.13), 0px 3px 5px rgba(235, 87, 87, 0.21);
}
/* Success */
.is-success {
    border: 1px solid #659E58;
    color: #659E58;
}
input.is-success:focus {
    box-shadow: 0px 8px 13px rgba(101, 158, 88, 0.13), 0px 3px 5px rgba(101, 158, 88, 0.21);
}
/* Dark neutral */
.is-dark-neutral {
    border: 1px solid #4D4D4D;
    color: #4D4D4D;
}
input.is-dark-neutral:focus {
    box-shadow: 0px 8px 13px rgba(51, 51, 51, 0.13), 0px 3px 5px rgba(51, 51, 51, 0.21);
}
/* Light neutral */
.is-light-neutral {
    border: 1px solid #4D4D4D;
    color: #4D4D4D;
}
input.is-light-neutral:focus {
    box-shadow: 0px 8px 13px rgba(229, 229, 229, 0.13), 0px 3px 5px rgba(229, 229, 229, 0.21);
}

/* Input messages */
.sys-message {
    display: block;
    padding: 10px;
    border-radius: 7px;
    margin: 6px 0 0 0;
    line-height: 14px;
    font-size: 13px;
}
.sys-message--primary {
    border: 1px solid #2F7DF6;
    background: #2F7DF6;
    color: #FAFAFA;
    box-shadow: 0px 8px 13px rgba(47, 125, 246, 0.13), 0px 3px 5px rgba(47, 125, 246, 0.21);
}
.sys-message--warning {
    border: 1px solid #F8CC46;
    background: #F8CC46;
    color: #4D4D4D;
    box-shadow: 0px 8px 13px rgba(248, 204, 70, 0.13), 0px 3px 5px rgba(248, 204, 70, 0.21);
}
.sys-message--invalid {
    border: 1px solid #EB5757;
    background: #EB5757;
    color: #F2F2F2;
    box-shadow: 0px 8px 13px rgba(235, 87, 87, 0.13), 0px 3px 5px rgba(235, 87, 87, 0.21);
}
.sys-message--success {
    border: 1px solid #659E58;
    background: #659E58;
    color: #F2F2F2;
    box-shadow: 0px 8px 13px rgba(101, 158, 88, 0.13), 0px 3px 5px rgba(101, 158, 88, 0.21);
}
.sys-message--dark-neutral {
    border: 1px solid #4D4D4D;
    background: #4D4D4D;
    color: #F2F2F2;
    box-shadow: 0px 8px 13px rgba(51, 51, 51, 0.13), 0px 3px 5px rgba(51, 51, 51, 0.21);
}
.sys-message--light-neutral {
    border: 1px solid #E6E6E6;
    background: #E6E6E6;
    color: #333333;
    box-shadow: 0px 8px 13px rgba(229, 229, 229, 0.13), 0px 3px 5px rgba(229, 229, 229, 0.21);
} 
