/*
Theme Name: arwiplain
Theme URI:
Author: Andrea Ricciotti
Author URI: https://www.andrearicciotti.it
Description: Custom ultra light theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, sticky-post, translation-ready
Text Domain: arwiplain

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* -------------------------------------------------------------------------------- */
/* ! *BASE* */
/* -------------------------------------------------------------------------------- */

body{
  font-family: 'Montserrat', sans-serif;
  font-display:swap;
  background-color: var(--light);
}

section {position: relative;}

hr {width:100%; border: none; border-top: 1px solid var(--primary-lighter);}

/* -------------------------------------------------------------------------------- */
/* ! *TYPOGRAPHY* */
/* -------------------------------------------------------------------------------- */

h1, .h1, h2, .h2, h3, .h3 {letter-spacing: -0.05em; color: var(--dark);}

.gigantic {font-size: 3.8rem; line-height: 1; letter-spacing: -0.05em;}

a {color: var(--primary); transition: all .3s cubic-bezier(.215, .61, .355, 1);}
a:hover {color: var(--primary-darker);}

.text-thin {font-weight: 200!important;}

article :is(p, li){font-size: 1.125rem;}

.subtitle-bg {font-weight: 200; color: var(--text-color); line-height: 1.3; position:relative;}
.subtitle-bg::after {content: ' '; display: block; position: absolute; top: 0;left: 1rem; width: 90%; height: calc(100% + 2rem); background-color: var(--accent-1); border-radius: 30px; z-index:-1;}
.subtitle-bg.bg-2::after {background-color: var(--accent-2); left: 2.5rem;}
.subtitle-bg.bg-3::after {background-color: var(--accent-3);}

@media (max-width: 1024px) {
  .gigantic {font-size:40px; word-wrap: break-word;}
}

.filter-primary {filter: invert(39%) sepia(80%) saturate(548%) hue-rotate(165deg) brightness(92%) contrast(88%);}

/* --------------------------------------------------------------------------------- */
/* ! *HEADER* */
/* --------------------------------------------------------------------------------- */

body.home:not(.scroll-down) .nav-transparent {background-color: transparent!important; box-shadow: none;}

.menu-item a:hover {color: var(--primary);}

.accent.menu-item a {background-color: var(--secondary);font-weight: bold;padding: 0 20px;}
.menu-item.accent a:hover {background-color: var(--secondary-darker);color:#000;}
body.home:not(.scroll-down) .accent.menu-item a {background-color: transparent;}

.nav-social {gap:10px;}
.nav-social a {line-height: 0;}
.nav-social a:hover img {width: 24px;height: 24px; object-fit: contain; filter: invert(28%) sepia(100%) saturate(759%) hue-rotate(178deg) brightness(89%) contrast(88%);}

@media (max-width: 991px) {
  #menu-primary {padding-top: var(--navbar);}
  #menu-primary .menu {padding-top: 30px;padding-bottom:100px;max-height:100vh; max-height: -webkit-fill-available; overflow:scroll;}
}

@media only screen
  and (max-width: 991px)
  and (orientation: landscape) {
    #menu-primary .menu {max-height:100vh!important;}
  }


@media (max-width: 767px) {
  body {padding-bottom: var(--navbar);}
  body:not(.home) .nav-logo {filter: invert(1);}
  body.scroll-down .nav-logo {opacity:0;transform: translateY(-50px);}
  body.menu--open .nav-logo {opacity:1!important; filter:none!important;transform: translateY(0); transition-delay: .5s;}
  a.nav-logo img {max-height: none;}
  .header-spacer {background: var(--primary-darker);}
  .nav-transparent {background-color: transparent!important; box-shadow: none;}
  .menu__toggle {top: auto;bottom: 0;right: 5px;}
  .shortcuts {position:fixed; bottom: 0;left: 0;width: 100%; height: var(--navbar); padding: 0 5px; background:#fff;box-shadow: 0 10px 24px rgba(51,51,51,.3);z-index:999;}
  .shortcuts__item {position: relative;display:block; width: var(--navbar); height: var(--navbar);}
  .shortcuts__item:before {content:' ';display: block; position: absolute; top:calc(50% - 12px);left:calc(50% - 12px);width: 24px;height: 24px;background: url(img/icons/home.svg) center center no-repeat;background-size: contain;}
  .shortcuts__item:last-child:before {content:none;}
}

/* ! - Chat button */
.chat-button {position:fixed;bottom: 20px; right: 20px;display:block;border-radius: 30px;background-color: #46c656;color:#fff;box-shadow: 1px 2px 6px rgba(0,0,0,.4);font-weight: bold;padding: 5px 10px;width: 50px;height: 50px;overflow: hidden;z-index: 997;}
.chat-button span {display:block;position:absolute;top: 14px;left: 50px;width: 170px;transform: translateX(60px);}
.chat-button img {width: 26px;height: 26px;filter:invert(1);margin-top: 6px;margin-left: 2px;}
.chat-button:hover span {transform: translateX(0);}
.chat-button:hover {color: #fff;background-color: #3da74a;width: 230px;}

@media (max-width: 768px) {
  .chat-button {bottom:calc(var(--navbar) + 10px);right: 10px;}
}

/* --------------------------------------------------------------------------------------------------------------------------- */
/* ! *COMPONENTS* */
/* --------------------------------------------------------------------------------------------------------------------------- */

.button--icon figure {width: 150px;}
.button--icon a img {transition: all .5s cubic-bezier(.215, .61, .355, 1);}
.button--icon a:hover img {transform: scale(1.2);}
.button--icon figcaption {font-weight: bold;font-size: 1.2rem; line-height: 1;text-align: center;margin-top: 1rem;}

/* ! - Cover */
.cover {height: 40vh;margin-top: var(--navbar);opacity:1;}
.cover.cover--single {height: 60vh; padding-top: var(--m-outer);padding-bottom: var(--m-outer);}
.cover__text>div {max-width:600px;}
.cover.cover--single .cover__img {height: 100%; padding-left: var(--m-outer); padding-right: calc(var(--m-outer) / 2);}
.cover.cover--single .cover__text {padding-right: var(--m-outer); padding-left: calc(var(--m-outer) / 2);}

.cover__credits {padding: 5px 10px;}
.cover__credits a {color:var(--secondary);}
.cover:not(.cover--single),
.cover.cover--single .cover__img div {position:relative;}
.cover:not(.cover--single):before,
.cover.cover--single .cover__img div:before {
  content:' ';display:block;position:absolute;bottom: 0;left: 0;width: 100%;height: calc(var(--gutter-x) * 4);
  background: rgba(0,0,0,.5);
  background: -moz-linear-gradient(0deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
  background: linear-gradient(0deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

@media (max-width: 767px) {
  .cover {margin-top: 0;}
  .cover.cover--single {height: auto;}
  .cover.cover--single .cover__img {height: 200px;}
}

/* ! - Footnotes */
.footnotes ul {list-style-type: none; text-indent: -12px;}

/* ! - Scroll to top */
.scroll-to-top {visibility: hidden; opacity: 0;position: fixed;bottom: 15px;right: 15px; width: 50px;font-size: 20px;height: 50px;border-radius: 100%;text-align: center;line-height: 45px;background-color: var(--link);cursor: pointer;transition: all .3s cubic-bezier(.215, .61, .355, 1);z-index: 999;}
.scroll-to-top {visibility: visible; opacity: 1;}
.scroll-to-top:hover{background-color: var(--link-hover);}


/* -------------------------------------------------------------------------------- */
/* ! *HOME* */
/* -------------------------------------------------------------------------------- */

.home :is(.wp-block-columns, .wp-block-media-text, .wp-block-pullquote, .wp-block-group) {
  margin-block-start: var( --m-inner )!important;
  margin-block-end: var( --m-inner )!important;
}

/* ! - Hero */
.hero {height: 100vh; background: linear-gradient(255.15deg, rgba(22, 69, 111, .5) 6.55%, rgba(22, 69, 111, 0) 50.15%);}
.hero .grid {flex:1;}
.hero__text {z-index: 10;}
.hero__text>div {max-width:600px;}
.hero__container {height: 100%;padding-top: var(--navbar); padding-bottom: var(--focus);}
.hero__container>.grid {height: 100%;position:static;}
.hero__img {position: absolute; top: 0;left: 60%;height: 100%;width: 40%;background-repeat: no-repeat;background-size: contain; background-position: left bottom;}
.hero__title h2 {margin-bottom: 0;margin-top: 10px;}
.hero__focus {position:absolute; bottom: 0; left: 0; width: 100%; padding-bottom: 15px;background-color: rgba(15,47,77,.9); z-index: 2;}
.hero__focus__item {padding-left: 50px;padding-right: 10px;}
.hero__focus__item::before {content:' '; position:absolute; top: 13px; left: 13px; width: 25px; height: 25px; background:url(img/icons/check.svg) center center no-repeat;background-size: contain;filter: invert(79%) sepia(18%) saturate(5902%) hue-rotate(339deg) brightness(101%) contrast(102%);}
.hero__focus h4, .hero__focus p {font-size: 1rem; line-height: 1.2;margin-bottom: 0;}
.hero__focus p {color: #fff;}
.hero__badges {gap: 15px;}
.badge {filter: invert(1); max-width: 80px; height: 60px;}

@media (min-width: 768px) {
  .hero__message-line-1 {font-size: 1.4em; line-height: 1.3;}
}

@media (min-width: 1281px) and (min-height: 900px){
  .hero__focus {min-height: 180px;}
}

/* iPhone fix */
@media only screen
and (max-device-width: 767px)
and (orientation: portrait) {
  .hero__img {background-size: cover; left: 40%;width: 60%;}
}

@media (max-width: 767px) {
  .hero {max-height: -webkit-fill-available;background: linear-gradient(255.15deg, rgba(22, 69, 111, .7) 6.55%, rgba(22, 69, 111, 0) 70.15%);}
  .hero__img {mix-blend-mode: soft-light;}
  .hero__title h1 {font-size: 30px;}
  .hero__container {padding-bottom: 0;}
  .hero__focus {position:static; height: auto;}
  .badge {max-width: 60px; height: 40px;}
}

/* Landscape */
@media only screen
  and (max-device-width: 812px)
  and (orientation: landscape) {
  .hero,.hero__container {max-height: none;height:auto;}
}

/* ! - Home Visibility */
.home-visibility {min-height: 500px;}
.home-visibility__question img {position: absolute; max-height: 80%; width: auto;right: 50px; bottom: 50px;}

.home-visibility__mediatext>.col-50:nth-child(2)>img {width: 100%;height: 100%;object-fit: cover;object-position: left;}

@media only screen
and (max-device-width: 1112px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
  .home-visibility__question img {bottom: -30px;}
}

@media (max-width: 767px) {
  .home-visibility {flex-flow: column;}
  .home-visibility__question img {left: auto; right: -10%;top: -70px; max-height: 180px;}
}

.wp-block-image.img-round {display: block;width: 100%; height: 0;padding-top: 100%;position: relative;margin: 0 auto;}
.wp-block-image.img-round img {width: 100%; height: 100%;object-fit: cover; padding: 20px; object-position: right; position: absolute; top: 0;left: 0;border-radius: 100%; }
.wp-block-image.img-round figcaption {line-height: 1.5; margin-top:30px; text-align: center; color: var(--dark)}
.wp-block-image.img-round figcaption strong {font-size: 1.5rem;}

@media (max-width: 991px) {
  .wp-block-image.img-round {width: 250px;max-width: 100%;padding-top: 250px;margin-bottom: 100px;}
}


/* ! - Disorders */
.disorders a:hover img {transform: scale(1.2);}
.disorders figure {height: 250px;}
.disorders figure img {height: 170px;}
.disorders figcaption {font-size: 1.2rem; line-height: 1; font-weight: bold;}

@media (max-width: 768px) {
  .disorders figure {height: 200px;}
  .disorders figure img {height: 130px;}
  .disorders figcaption {font-size: 1rem;}
}

#articles_section .card {border: 1px solid #e1e1e1; border-radius: 14px;}

/* ! - F.A.Q. */
.faq {background-color: var(--dark);}
.faq__title {position: relative; cursor: pointer;font-weight: normal;line-height: 1.4;}
.faq__title::before {content:" "; display:block; position: absolute; top: 0; left: -10px; width: 25px; height: 25px; background: url(img/icons/right.svg) center center; background-repeat: no-repeat; background-size: contain;filter: invert(1);}
.faq__panel {max-height: 0; overflow: hidden;}
.faq__panel.faq__panel--show {max-height: 800px;}

/* ! - Contacts */
.contacts {
  min-height: 600px;
  background: var(--dark);
  padding-top: 150px;
  padding-bottom: 300px;
}

.contacts .contacts__content {position:relative;background: var(--primary-darker);border-radius:20px;}

.contacts .contacts__content::before {content: ' '; display: block; position: absolute; bottom: 0; left: -20px; width: 40%; height: 130%; background-image:url(img/contatti-large.webp), url(img/contatti-large.png);background-position: center bottom;background-repeat: no-repeat; background-size: contain;}

.contacts .text-light {z-index: 2;}
.contact {position: relative; z-index: 2;padding-left: 40px;}
.contact::before {content:" "; display:block; position: absolute; top: 0; left: 0; width: 25px; height: 25px; background: url(img/icons/point.svg) center center; background-repeat: no-repeat; background-size: contain;filter: invert(1);}
.contact--phone::before {background-image: url(img/icons/phone.svg);}
.contact--email::before {background-image: url(img/icons/mail.svg);}
.contact--wapp::before {background-image: url(img/icons/wapp.svg);}
.contact--skype::before {background-image: url(img/icons/skype.svg);}
.contact a, address a {color:var(--light);}
.contact a:hover, address a:hover {text-decoration: underline;color:#fff;}

.contact a {border-bottom: 1px dashed #fff;}
.contact a:hover {text-decoration: none; border-bottom: 1px solid #fff;}

.socials a img {width: 45px;height: 45px;padding: 10px;}
.socials a:hover img {padding: 0;}

.contacts__content .contacts__miodottore {min-width: 320px; position:absolute; top: 50%;left: calc(70% + 16px); z-index:997;}

@media (max-width: 991px) {
  .contacts {margin-left: calc(var(--m-outer) * -1);padding-top: 10px;padding-bottom: 450px;margin-top: -1px;}
  .contacts .contacts__content {border-top-left-radius: 0; border-bottom-left-radius: 0;}
  .contacts .contacts__content::before {width: 200px;height: 270px;left: -70px; bottom: 70px;}
  .contacts .contacts__content::after {content: ' '; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top-right-radius:20px;border-bottom-right-radius:20px;
  background: rgba(0,0,0,0.3);
  background: -moz-linear-gradient(45deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(45deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
  background: linear-gradient(45deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
  }
  .contacts__content .contacts__miodottore {top: 90%;left: calc(50% - 160px);}
}

/* iPhone fix */
@media only screen
and (max-device-width: 767px)
and (orientation: landscape) {
  .contacts .contacts__content .col-60 {max-width:60%;}
  /* .hero__text {max-width:80%!important;flex: 0 0 80%!important;} */
}

/* -------------------------------------------------------------------------------- */
/* ! *BLOG* */
/* -------------------------------------------------------------------------------- */

/* ! - Pagination */
.pagination__item strong {display:block;line-height: 1;margin-top: 10px;}
.pagination__item {width: 100%;height: 100%;}
.pagination__item span {line-height: 1;}
.pagination__img {max-width: 80px;}

@media (max-width: 767px) {
  .pagination__prev .pagination__item {align-items: flex-end;}
  .pagination__next .pagination__item:not(.back-to-home) {align-items: flex-start;justify-content: flex-start;}
  .pagination__next {border-left: 1px solid var(--primary-lighter);}
}

/* ! - Sticky Loop */
.stickyloop__container,
.title-search {background-color: var(--dark);}

.stickyloop {
  display: grid;
  grid-template-columns: 50% auto;
  grid-auto-rows: 33.33%;
  grid-column-gap: 50px;
}

.stickyloop {color: var(--light);}

.stickyloop [class*="card__item-"].card {flex-flow: row; border-top: 1px solid rgba(255,255,255,.3); padding: 5% 0;}
.stickyloop [class*="card__item-"].card:nth-child(-n+2) {border-top: none;}
.stickyloop [class*="card__item-"].card .card__cover {width: 40%;height: 180px; max-height: 100%;overflow: hidden;}
.stickyloop [class*="card__item-"].card .card__cover img {width: 100%;height: 100%;object-fit: cover;}
.stickyloop [class*="card__item-"].card .card__body {width: 55%;margin-left: 5%; padding: 0;}
.stickyloop [class*="card__item-"].card .card__footer {padding-top: 10px;}


.stickyloop .card.card__item-1 {
  height: auto;
  flex-flow: column;
  max-height: none;
  grid-area: 1 / 1 / 4 / 1;
}

.stickyloop .card.card__item-1 .card__cover {width: 100%; margin-bottom: 20px;}
.stickyloop .card.card__item-1 .card__body {margin-left: 0; width: 100%;}

@media (min-width: 768px) {
  .stickyloop .card.card__item-1 .card__cover {height: 400px;}
}

@media (max-width: 767px) {
  .stickyloop {display: flex;flex-flow: column;}
  .stickyloop .card__item-1 .card__cover {height: 250px;}
}

/* ! - Tag Items */
.tag-item {display: inline-block;margin-top: 5px;margin-right: 5px;line-height: 3;font-size: 10px;}
.tag-item a {background-color: var(--primary-lighter); color:#000;} /* rgba(22, 69, 111, .1)*/
.tag-item a:hover {background-color: var(--primary); color:#fff;}

.contact-form {border: 1px solid rgba(255,255,255,.3); border-radius: 20px; overflow: hidden;}
.contact-form .wpcf7 label {color:#999;}
.wpcf7 form .wpcf7-response-output {color:#fff;}

/* -------------------------------------------------------------------------------- */
/* ! *PAGE TEMPLATES* */
/* -------------------------------------------------------------------------------- */

/* ! - Analisi funzionale */
.menu-children {background:#fff;border-radius: 20px;box-shadow: 4px 4px 4px #e1e1e1;}
.menu-children ol {list-style-position: inside;padding-left: 0;list-style-type: none;padding-top: 15px;padding-bottom: 15px;}
.menu-children .page_item {color:var(--primary-lighter);line-height: 1.2;padding: 15px 10px 15px 20px;border-left: 6px solid transparent;}
.menu-children .page_item.current_page_item {border-color:var(--primary-lighter);}
.menu-children .page_item.current_page_item a {color:var(--primary-darker);font-weight: bold;}

@media (max-width: 767px) {
  .menu-children {box-shadow: 0px 4px 4px #e1e1e1;}
}

/* -------------------------------------------------------------------------------- */
/* ! *WIDGETS* */
/* -------------------------------------------------------------------------------- */

/* ! -Categories list */
.wp-block-categories-list.wp-block-categories {list-style-type: none; padding: 0;}
.wp-block-categories-list.wp-block-categories li {padding-bottom: 0;}
.wp-block-categories-list.wp-block-categories a {text-transform: uppercase;font-weight: bold;transition: all .5s cubic-bezier(.215, .61, .355, 1);}
.wp-block-categories-list.wp-block-categories .cat-item .children .cat-item a {text-transform:none;}
.wp-block-categories-list.wp-block-categories .cat-item .children .cat-item::marker {color: var(--primary);}

/* ! -Tag cloud */
.wp-block-tag-cloud a {display:inline-block;font-weight: bold;padding: 0 5px;line-height: 1;margin-bottom: 5px;margin-right: 0;border-radius: 14px;transition: all .5s cubic-bezier(.215, .61, .355, 1);}
.wp-block-tag-cloud a:hover {background-color: #fff;}

/* ! - Recent items */
.wp-block-latest-posts__list.wp-block-latest-posts {padding-left: 0;}
.wp-block-latest-posts__list.wp-block-latest-posts li {border-bottom: 1px solid var(--primary-lighter);padding:16px 0;list-style-type: none;}
.wp-block-latest-posts__list.wp-block-latest-posts li:last-child {border-bottom: none;}
.wp-block-latest-posts__list.wp-block-latest-posts li .wp-block-latest-posts__post-title {font-size: 1.25rem; font-weight: bolder;line-height: 1;}
.wp-block-latest-posts__list.wp-block-latest-posts li .wp-block-latest-posts__featured-image {width: 70px;float: left;margin-right: 20px;}
.wp-block-latest-posts__list.wp-block-latest-posts li .wp-block-latest-posts__post-author {font-size: .8rem;}
.wp-block-latest-posts__list.wp-block-latest-posts li .wp-block-latest-posts__post-date {display: block;font-size: .8rem;color:#999;}
.wp-block-latest-posts__list.wp-block-latest-posts li .wp-block-latest-posts__post-excerpt {font-size: .8rem; line-height: 1; margin-top: 10px;}

.widget h2,
.widget__title {display:block; color: var(--text-color);font-size: 1.5rem; padding: 16px 0; margin-bottom: 16px; margin-top: 32px;text-transform: uppercase; font-weight: lighter;border-top: 1px solid var(--text-color); border-bottom: 1px solid var(--text-color);}


/* ! -Iubenda */
.iubenda-embed:not(.no-brand):not(.iubenda-nostyle) {box-shadow: none!important;}

/* -------------------------------------------------------------------------------- */
/* ! *ANIMATIONS* */
/* -------------------------------------------------------------------------------- */

.fade-in{opacity: 0; transform: translateY(1rem);}
.text-reveal{transform: translateY(1rem);clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
.fade-up{opacity: 0; transform: translateY(3rem);}

.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}