/*!
Theme Name: aces
Version: 1.1.9
Theme URI: http://underscores.me/
Author: aceall
Author URI: https://www.backgroundsy.com/
Description: Maximized for fast loading
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: aces
Tags: custom-background, custom-logo, custom-menu, featured-images, translation-ready
*/

html {
	line-height: 1.2;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

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

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2rem;
    margin: 0.8em 0;
	letter-spacing: -1px;
	font-weight: 700;
}

h2 {
	font-size: 1.2em;
	margin: 0.3em 0;
	letter-spacing: -1px;
	font-weight: 700;
}

h2 a, h2 a:visited {
    color: #1e1e1e;
	text-decoration: none;
}

/* 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;
	text-decoration: underline;
	text-decoration: underline dotted;
}

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

img {
	border-style: none;
}

svg {
    fill: #0d3479;
}



/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1.1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

h3 {
    letter-spacing: -0.5px;
    font-weight: 700;
    margin: 12px 0;
	font-size: 1.35rem;
}

p {
	margin-bottom: 1.5em;
}



/* Elements
--------------------------------------------- */
body {
	background-color: #ffffff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}


/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	width: 100%;
	height: auto;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

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

/* Links
--------------------------------------------- */
a, a:visited {
	color: #0d3479;
}

a:hover,
a:focus,
a:active {
	color: #37b3e6;
	text-decoration: none;
}

a:focus {
	outline: none;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */

/* 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;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

input[type=checkbox] {
    transform: scale(1.25);
}

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

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

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button {
	-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;
}
input[type="email"], input[type="text"], textarea {
    border: 1px solid #b3bec7;
    padding: 12px;
    margin: 5px 0;
    border-radius: 4px;
    max-width: 100%;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

aside input[type="email"], aside input[type="text"], aside textarea, textarea {
	width: 100%;
}


#content input:focus {
    border-color: #37b3e6;
    box-shadow: inset 0 0 4px rgba(29, 135, 255, 0.6);
}





button, input[type="submit"] {
    border: none;
    background-color: #37b3e6;
    color: white;
    padding: 17px;
    border-radius: 30px;
    cursor: pointer;
}

button:hover, input[type="submit"]:hover {
    background-color: #67ccf5;
}


nav button:hover, nav input[type="submit"]:hover {
    background-color: white;
}


aside button, aside input[type="submit"] {
    background-color: #0d3479;
}

aside button:hover, aside input[type="submit"]:hover {
    background-color: #174ba7;
}

.widget_block, #sidebar .frm_forms {
	margin-bottom: 2rem;
}


/**
 * 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;
}




/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 9px 2rem;
	box-shadow: 0px 2px 11px #c9cddf;
}

@media screen and (max-width: 768px) {
.site-header {
    padding: 12px 1rem;
}
}
.site-branding {
    display: -webkit-box;
    display: flex;
	-webkit-box-align: center;
    align-items: center;
	margin-right: 1rem;
}

.site-branding p {
	margin: 0;
}

.site-title a, .site-branding h1 a {
    color: #1e1e1e;
	text-decoration: none;
	font-size: 27px;
    font-weight: 700;
	margin: 0 0 0 0.6rem;
	display: -webkit-box;
    display: flex;
	letter-spacing: -1px;
	line-height: 0.85em;
}

@media screen and (max-width: 768px) {
	.site-title, .site-branding h1 {
		display: none;
	}
}


/*--------------------------------------------------------------
# Search
--------------------------------------------------------------*/


input.search-field  {
    color: #181818;
    border: none;
	outline:none;
    padding: 19px;
	padding-right: 0;
    background: none;
}

.search-submit {
    border: none;
    border-radius: 50%;
    padding: 0 0.3em;
    cursor: pointer;
    background-color: #eaecef;
    color: #ffffff;
}

.search-submit:hover {
    background-color: #f5f6f7;
    box-shadow: 0px 0px 10px #89dff1;
}

svg#search-icon {
    width: 50px;
    height: 50px;
	fill: #37b3e6;
}

.search-box {
    max-width: 440px;
    width: 100%;
    border-radius: 35px;
    margin-right: 1.15rem;
    border: none;
    background: #eaecef;
}
.search-form {
    align-items: stretch;
	display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
}

.search-form label {
    align-items: stretch;
	display: -webkit-box;
    display: flex;
    font-size: inherit;
    margin: 0;
    width: 100%;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal;
}

.search-form .search-field {
    width: 100%;
}

.search-form .search-submit {
    flex-shrink: 0;
}


/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */

.menu-toggle {
	border: 0;
	cursor: pointer;
	background-color: #ffffff;
}


button.menu-toggle:hover {
	transition: transform .2s;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.main-navigation {
    margin: 0;
    padding: 0;
	margin-left: auto;
	position: relative;
}

.main-navigation ul {
	display: none;
}

.main-navigation li {
    margin-left: 0;
	padding: 4px 0;
}
.main-navigation li a {
    display: block;
    text-decoration: none;
    color: #202020;
    padding: .6rem 1rem;
}

.page_item_selected:hover, .main-navigation li a:hover, #primary-menu .menu-item:last-child a:hover {
    text-decoration: underline;
}

.menu-toggle {
	padding: 0;
}

.main-navigation.toggled ul {
	display: block;
	padding: 1rem;
	border-radius: 20px;
}

ul.nav-menu {
    position: absolute;
    right: 0;
    min-width: 300px;
    top: 60px;
    background-color: #ffffff;
    border-radius: 4px;
	box-shadow: 3px 3px 6px #c0c0c0;
}


/* Sidebar
--------------------------------------------- */

#sidebar {
    max-width: 300px;
    margin-left: 6%;
    width: 100%;
}


@media screen and (max-width: 768px) {
#content {
    flex-wrap: wrap;
}

#sidebar {
    margin-left: 0;
	margin-top: 3rem;
	width: 100%;
	text-align: center;
}
}

ul.wp-block-categories {
	display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
	line-height: 25px;
}
.wp-block-categories li a {
    padding: 3px 8px 5px 8px;
    border-radius: 18px;
    text-decoration: none;
    background-color: #ebf1f6;
    margin: 0 0.2em 0.4rem 0;
    display: block;
    font-size: 1rem;
}
.wp-block-categories li a:hover {
    background-color: #0d3479;
}


/* Footer
--------------------------------------------- */

footer#colophon {
    padding: 2rem 1rem 8rem 1rem;
    text-align: center;
    line-height: 1.6rem;
    font-size: 1em;
    box-shadow: 0 -6px 8px #e3e5ef;
}

.site-footer ul {
	display: -webkit-box;
    display: flex;
	justify-content: center;
	flex-wrap: wrap;
	color: #bfcacf;
	margin-top: 0.5rem;
}
.site-footer ul > li:not(:last-child)::after {
    content: "|";
    margin: 0 .25em;
}

/* Posts and pages
--------------------------------------------- */

.download-block {
    margin-right: 0;
    margin-left: auto;
}

@media screen and (max-width: 768px) {
.post {
    width: 100%;
    flex-direction: column;
	display: -webkit-box;
    display: flex;

}
.page {
    width: 100%;
}
}



/* Homepage
--------------------------------------------- */

#content {
    display: -webkit-box;
    display: flex;
    justify-content: center;
    padding: 4rem 1rem;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: content-box;
}

#primary {
    width: 100%;
	max-width: 768px;
}

.page-content {
    width: 100%;
}

.articles-grid {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


@media screen and (min-width: 1024px) {

.articles-grid-1 {
    max-width: 100%;
}
.articles-grid-2 {
    max-width: 47%;
}
.articles-grid-3 {
    max-width: 30%;
}
.articles-grid-4 {
    max-width: 23%;
}
}
article.entry-summary {
	margin-bottom: 3rem;
	width: 100%;
}
@media screen and (max-width: 768px) {
article.entry-summary {
	width: 100%;
}
}

/* Archive
--------------------------------------------- */
header.page-header {
    width: 100%;
}

/* Single
--------------------------------------------- */
.entry-content {
	width: 100%;
}
.donwload-link a {
    max-width: 100px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
}
.similar-graphics {
    padding-bottom: 100px;
}
.similar-graphics ul {
    display: -webkit-box;
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    max-width: 1500px;
}
.similar-graphics li {
    width: 33.33%;
	padding: 20px;
	align-items: center;
	display: -webkit-box;
    display: flex;
}
@media screen and (max-width: 768px) {
.similar-graphics li {
    width: 50%;
}

.similar-graphics a {
    width: 100%;
	text-align:center;
}
.similar-graphics img {
    width: 100%;
}
}
.similar-graphics-title h3 {
	text-align: center;
}
.similar-graphics img {
	line-height:0;
	vertical-align: middle;
}
.entry-meta {
    margin-bottom: 1rem;
	margin-top: 3rem;
}
.entry-meta ul {
	display: -webkit-box;
    display: flex;
	flex-wrap: wrap;
}
.entry-meta li a {
    padding: 3px 9px 5px 9px;
    border-radius: 16px;
    text-decoration: none;
    background-color: #ebf1f6;
    display: block;
    font-size: 0.9em;
    margin: 4px;
}
.entry-meta li a:hover {
    background-color: #0d3479;
}
/*	Details */
.heading-download {
    font-weight: 700;
    font-size: 1.3em;
    margin-bottom: 10px;
}
.details {
    display: -webkit-box;
    display: flex;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}
.features {
    display: -webkit-box;
    display: flex;
    flex-direction: column;
    margin-right: auto;
    width: 100%;
}
.file-download::before {
    content: url(data:image/svg+xml,%3Csvg%20class%3D%22svg-icon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%230d3479%22%20d%3D%22M12%2021l-8-9h6v-12h4v12h6l-8%209zm9-1v2h-18v-2h-2v4h22v-4h-2z%22%2F%3E%3C%2Fsvg%3E);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #f4f7f9;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 1px 3px 7px #c7c7c7;
}
.download {
    width: 100%;
    box-shadow: 1px 3px 4px #abb5c1;
    background-color: #ebf1f6;
    border-radius: 7px;
    padding: 1rem;
	margin-bottom: 3rem;
}
.format, .resolution, .print-size, .file-size {
    margin-bottom: px;
	display: flex;
	display: -webkit-box;
}

.details-value {
    font-weight: 700;
}
.details-heading {
    margin-right: 0.5rem;
    font-size: 1rem;
    width: 30%;
}
.format .details-value, .file-size .details-value {
    background-color: #0d3479;
    padding: 2px 5px;
    font-size: 0.8em;
    color: white;
    display: inline;
    border-radius: 2px;
}
.color-palette, .print-size, .resolution, .format, .file-size {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 1px 0px 12px 1px #e7e8e9;
    display: inline-flex;
    padding: 0.6rem 0.8rem;
}
.file-download {
    position: relative;
    padding: 10px 0 0 55px;
	margin-bottom: 17px;
}
/*	Color Schemes */
.color-palette {
    display: inline-block;
    width: 100%;
}
.color-palette .details-heading {
	padding-bottom: 5px;
}
.color-palette-colors {
    display: flex;
    display: -webkit-box;
    width: 100%;
}
.color-box {
    width: 20%;
    text-align: center;
}
.color-sample {
    width: 100%;
    height: 30px;
    margin: 0 auto;
}
.hex-value {
    padding: 5px 4px;
    font-weight: 700;
    font-size: 1rem;
}
.color-name {
    padding: 0 5px 2px 5px;
}
.color-shade {
    font-size: 0.8rem;
	padding: 0 4px;
}
.services-box {
    background-image: linear-gradient(230deg, #1ecce5, #0291c9);
    color: white;
    text-align: center;
    padding: 3rem;
    font-size: 1.6rem;
}
.locked-1 {
	padding: 4% 6% 1% 6% ;
    pointer-events: none;
    /* background: repeating-linear-gradient( -45deg, #fdf9f9, #fbf6f6 11px, #fff 1px, #fff 21px ); */
    border: 10px solid #ff88af;
    border-bottom: none;
    border-radius: 40px 40px 0 0;
    box-shadow: 5px -5px 7px #ffe9f0, inset 5px 5px 7px #ffe9f0;
    -moz-box-shadow: 5px -5px 7px #ffe9f0, inset 5px 5px 7px #ffe9f0;
    -webkit-box-shadow: 5px -5px 7px #ffe9f0, inset 5px 5px 7px #ffe9f0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.locked-2 {
    pointer-events: none;
    background: repeating-linear-gradient( -45deg, #ebf1f6, #ebf1f6 36px, #f5f8f9 0px, #eff6fb 74px );
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 1.5rem 1em;
    border-radius: 9px;
    border-bottom: 5px solid #f5d868;
    /* background-color: #ebf1f6; */
}
#primary .aces-form-1 {
    padding: 1% 6% 4% 6%;
    border: 10px solid #7cd7fd;
    border-top: none;
    border-radius: 0 0 40px 40px;
    /* background: repeating-linear-gradient( -45deg, #ddefef, #ddefef 11px, #e5f2f3 1px, #e5f2f3 21px ); */
    box-shadow: 5px 5px 7px #d0f1ff, inset 5px -5px 7px #d0f1ff;
    -moz-box-shadow: 5px 5px 7px #d0f1ff, inset 5px -5px 7px #d0f1ff;
    -webkit-box-shadow: 5px 5px 7px #d0f1ff, inset 5px -5px 7px #d0f1ff;
}
#primary .aces-form-2 {
    padding: 30px 30px 40px 30px;
    border-bottom: 5px solid #f7f7f7;
    border-radius: 10px;
    box-shadow: 3px 3px 22px #92a4bf;
    -moz-box-shadow: 3px 3px 22px #92a4bf;
    -webkit-box-shadow: 3px 3px 22px #92a4bf;
    margin: 0 auto;
    text-align: center;
    max-width: 500px;
    margin-top: -170px;
    background-color: white;
    z-index: 99;
    position: relative;
    background-color: #ffffff;
}
.aces-form-2 button {
    border: none;
    background-color: #0d3479;
    color: #ffffff;
    cursor: pointer;
    border-bottom: 5px solid #f5d868;
    font-weight: 700;
    max-width: 350px;
    padding: 17px 30px;
}
.aces-form-2 button:hover {
	background-color: #ffdb4d;
	box-shadow: 0 0 12px 7px rgba(255, 204, 0, 0.25);
	-webkit-transition: all 0.2s linear 0s;
	-moz-transition: all 0.2s linear 0s;
	-o-transition: all 0.2s linear 0s;
	transition: all 0.2s linear 0s;
}
.aces-form-2 input[type="email"] {
	width: 100%;
	max-width: 350px;
}
.psd-size, .png-size {
    background-color: #0d3479;
    padding: 2px 7px;
    font-size: 0.8em;
    font-weight: 700;
    color: white;
    display: inline;
    border-radius: 13px;
}
.psd-download, .png-download {
    margin-bottom: 10px;
}
/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}
img.custom-logo {
    max-width: 60px;
}
#masthead h1 {
	margin: 0;
}
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}
/* -------------------------------------------------------------------------- */

/*	13. Site Pagination
/* -------------------------------------------------------------------------- */

.pagination-wrapper.section-inner {
    width: 100%;
	margin-top: 3rem;
	padding: 1rem;
}
.pagination .nav-links {
	align-items: baseline;
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.2rem;
	font-weight: 600;
	justify-content: center;
}
.current {
    font-size: 1.2rem;
    color: white;
    border-radius: 50%;
    background-color: #37b3e6;
    display: block;
    width: 60px;
    height: 60px;
	text-align: center;
}
.nav-links > * {
	padding: 1.2rem;
}
.nav-links .placeholder {
	display: none;
	visibility: hidden;
}
.pagination a {
    text-decoration: none;
    font-size: 1.2rem;
    color: #444;
}
.pagination a:focus,
.pagination a:hover {
	text-decoration: underline;
}
.pagination .dots {
	transform: translateY(-0.3em);
	color: #6d6d6d;
}
.nav-short {
	display: none;
}
img.featured-image, img.post-thumbnail, img.wp-post-image {
  max-width: 768px;
}
.post-thumbnail img {
  pointer-events:none;
}
/*	Woocommerce */
.step {
    font-size: 60px;
    font-weight: 100;
    background: -webkit-linear-gradient(#315dd9, #3ae2fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step_title {
    font-size: 25px;
    font-weight: 700;
    margin: 20px 0;
}
.how-it-works {
	clear:both;
}
.how-it-works-box {
	width: 100%;
	padding: 25px 15px;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 20px;
	margin-bottom: 15px;
}
@media only screen and (min-width: 769px) {
.how-it-works {
	display: -webkit-box;
	display: flex;
	justify-content: space-between;
}
.how-it-works-box {
	max-width:350px;
	padding: 25px 15px; 
}
}
@media only screen and (min-width: 769px) {

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    width: 68%;
}
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    width: 27%;
}
}
/*	End of Woocommerce */

/*	Old divs and tags */
#details {
  margin: 25px 0;
}

/*	ADS */
.post-box {
	margin-bottom: 35px;
}

/*	Contact form 7 */
.wpcf7-list-item {
	margin: 0.5em 0 1em 1em !important;
	font-size: 0.8em;
}
.wp-block-image {
    margin: 0 !important;
}

/*	Formidable */
fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

.frm_opt_container {
    padding: 0.5em 0 1em 0.5em;
    font-size: 1rem;
}

#primary .aces-form-2 .frm_opt_container {
    max-width: 350px;
    margin: 0 auto;
}


.with_frm_style .frm_loading_prev .frm_prev_page, .with_frm_style .frm_loading_form .frm_button_submit {
    position: relative;
    color: transparent;
	background-color: #67ccf5;
}

.with_frm_style .frm_loading_prev .frm_prev_page::before,.with_frm_style .frm_loading_form .frm_button_submit:before {
    content: '';
    display: inline-block;
    position: absolute;
    background: transparent;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
@keyframes spin {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(360deg);
 }
}