/* Colors:

	grey/beige: #e7e1d3
	light beige:#f7f4ed
	grey:	    #747477
	gold:		#d5a84a
	red:		#861f26


/**********/
/* RESETS */
/**********/

.modal {
    display: none;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    /* 10px = 1rem */
}

body {
    min-width: 100%;
}

.nav-list,
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

p,
a {
    text-decoration: none;
    color: #747477;
}

h1 {
    font-size: 3.6rem;
}

#main {
    margin-bottom: 10rem;
}

.home #main {
    margin-bottom: calc(100vw / 1903 * 225);
}

@media screen and (max-width: 768px) {
    .home #main {
        margin-bottom: 20rem;
    }
}

.page-template-template-about #main {
    margin-bottom: 0rem;
}

#main .entry-content h1,
#main .entry-content h2,
#main .entry-content h3,
#main .entry-content h4 {
    margin: 3rem 0 3rem 0;
}

#main .entry-content h1:first-child,
#main .entry-content h2:first-child,
#main .entry-content h3:first-child,
#main .entry-content h4:first-child {
    margin-top: 0;
}

#main .entry-content ul {
    margin: 1rem 0 0 0;
}

#main .entry-content ul.wp-block-gallery {
    margin-top: 5rem;
}

#main .entry-content ul.wp-block-gallery + ul.wp-block-gallery {
    margin-top: 0rem;
}

/* STANDARD */

body {
    background-color: #e7e1d3;
    font-family: 'Helvetica LT W01 Light', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    color: #747477;
    position: relative;
}

.site-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.headline {
    color: #861f26;
    margin: 0;
    font-weight: lighter;
    line-height: 1.2;
    width: 100%;
    max-width: 45rem;
}

.section {
    position: relative;
    width: 100%;
    background: #fff;
    /* min-height: 100vh; */
    height: auto;
}

.blocktext {
    text-align: justify;
}

.text-block {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.text-ecke,
.text-ecke-small {
    position: absolute;
    top: 0;
    background: url(../img/text_ecke.png) no-repeat;
    width: 32rem;
    height: 26rem;
    right: 10%;
    z-index: -1;
    pointer-events: none;
}

.middot {
    color: #d5a84a;
}

.elipse {
    pointer-events: none;
}

.elipse-special img,
.elipse img {
    width: 100%;
}

.mobile-only-1024 {
    display: none;
}

/* LOGO */

.brand {
    text-align: center;
    min-width: 12rem;
}

.brand img {
    width: 100%;
    margin: 0 auto;
}

.content-wrapper {
    position: relative;
    height: auto;
}

.content-text {
    margin-top: 1rem;
}

/* NAVIGATION */

.nav {
    width: 100%;
    position: fixed;
    z-index: 200;
    pointer-events: none;
}

.navigation-svg-wrapper {
    position: relative;
}

.navigation-svg {
    left: 0;
    position: relative;
    display: block;
    width: calc(100% + 1px);
    z-index: -1;
    top: -1px;
}

#navsvg {
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 2000;
}

.nav .nav-list-wrapper {
    top: 1rem;
    text-align: center;
    pointer-events: all;
}

.nav .nav-list {
    list-style: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.nav-list-wrapper .nav-list {
    padding-top: 1.5rem;
}

.nav li {
    display: inline-block;
}

.nav li a {
    text-decoration: none;
    color: #747477;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.nav li a:hover {
    color: #d5a84a;
}

.nav-list-wrapper .nav-list-item::before {
    display: inline;
    content: '\2022\a0';
    color: #d5a84a;
}

.nav-list-item:first-child:before {
    display: none;
}

.svg-wrapper-desktop,
.svg-wrapper-mobile {
    position: relative;
    width: calc(100% + 1px);
    left: -1px;
    float: left;
    margin-top: -1px;
}

.nav .brand {
    margin-top: 5rem;
    padding-top: 2%;
    width: 12%;
    min-width: 12rem;
    position: absolute;
    left: 50%;
    bottom: 20%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.nav .brand img {
    width: 100%;
}

.elipse {
    display: block;
    position: absolute;
    width: calc(100% + 2px);
    bottom: -1px;
    height: auto;
    margin-left: -1px;
}

.nav.small .brand {
    bottom: 38%;
}

.nav.small .brand img {
    width: 80%;
}

.nav.small .navigation-svg {
    top: -8rem;
}

.nav .brand,
.nav .brand img,
.nav .navigation-svg {
    transition: all 0.3s ease;
}

.nav img {
    pointer-events: none;
}

/* OPENING HOURS */
.opening-hours {
    position: fixed;
    display: block;
    background: #fff;
    right: 0;
    top: 50%;
    -webkit-transform: translate(-100%, -50%);
    transform: translate(100%, -50%);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    z-index: 210;
}

.opening-hours.active {
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

.clock-icon-wrapper {
    display: block;
    border-top-left-radius: 4rem;
    border-bottom-left-radius: 4rem;
    background: #fff;
    border-top: 1px solid #861f26;
    border-bottom: 1px solid #861f26;
    border-left: 1px solid #861f26;
    cursor: pointer;
    left: -6.8rem;
    padding: 1rem;
    position: absolute;
}

.clock-icon-wrapper .icon-clock {
    font-size: 5rem;
}

.opening-hours-wrapper {
    display: block;
    padding: 2rem 5rem;
    border: 0.1rem solid #861f26;
    border-radius: 0.3rem;
}

.opening-hours-text-wrapper {
    display: block;
    width: 40rem;
}

.opening-hours-text-wrapper p {
    display: block;
    width: 50%;
    float: left;
}

.full-width-text {
    width: 100%;
    display: inline-block;
}

/* HEAD Section */
#head-section {
    position: relative;
    width: 100%;
    background-image: url(../img/inneneinrichtung.jpg);
    background-size: cover;
    background-position: center center;
    min-height: calc(100vh + 20rem);
    height: auto;
    z-index: 90;
}

.home #head-section {
    margin-bottom: 15rem;
}

.book-advert {
    display: block;
    position: absolute;
    bottom: 30%;
    right: 5%;
    background: #fff;
    border: 2px solid #861f26;
    border-radius: 2.5rem;
    padding: 2rem 2.5rem;
    cursor: pointer;
    -webkit-transition: 1s ease all;
    transition: 1s ease all;
}

.book-advert-content-wrapper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.book-advert h3 {
    font-weight: 100;
    font-size: 2.5rem;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.book-advert.active h3 {
    font-weight: 100;
    font-size: 2.5rem;
}

.book-cover {
    height: auto;
    padding-right: 3rem;
    width: 30rem;
}

.book-text-wrapper {
    max-width: 35rem;
}

.read-more-arrow {
    position: absolute;
    left: 50%;
    top: 77%;
    -webkit-transform: translate(-50%, -60%);
    transform: translate(-50%, -60%);
}

/* GOLDSCHMIEDE */

#goldschmiede {
    background-color: #e7e1d3;
    z-index: 80;
}

.goldschmiede-container {
    padding: 0 17%;
    width: 100%;
}

#goldschmiede .text-block {
    position: absolute;
    width: 32.33333333%;
    top: 41%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#goldschmiede .text-ecke {
    -webkit-transform: translate(-117%, -29%);
    /*    transform: translate(-117%, -29%);*/
    left: 50%;
}

#goldschmiede .ring {
    position: absolute;
    bottom: -15rem;
    right: 0;
    width: 100%;
    height: 100%;
    background: url(../img/Ring-freigestellt.png);
    background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat;
}

/*  ÜBER UNS */

#post-295 .mobile-evening-pic {
    display: none;
}

#about-us {
    display: inline-block;
    /* min-height: calc(100vh + 21rem); */
    /* height: calc(100vh + 21rem); */
    background: #f7f4ed;
    z-index: 70;
}

#about-us .evening-pic {
    display: inline-block;
    height: 100%;
    width: 41.66666667%;
}

#about-us .evening-pic {
    background-image: url(../img/schmiede_am_abend.png);
    background-size: cover;
    min-height: calc(100vh + 213px);
    height: auto;
    background-position: center;
}

#about-us .text-block {
    display: inline-block;
    top: 43%;
    padding: 0 8.3333%;
    width: 50.333333%;
}

#about-us .text-ecke {
    -webkit-transform: translate(25%, -26%);
    transform: translate(25%, -26%);
}

#about-us .text-ecke-small {
    -webkit-transform: translate(68%, 47%) scale(0.7);
    transform: translate(68%, 47%) scale(0.7);
}
.elipse-invert,
.elipse-special {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    z-index: 50;
}
.elipse-invert {
    top: unset;
    bottom: -1px;
    left: 0;
    width: 100%;
    z-index: 50;
    transform: rotate(180deg);
}

#about-us .elipse {
    bottom: -4px;
}

/* LEISTUNGEN */
#service {
    background-color: #e7e1d3;
    min-height: 25vh;
}

#service .content-wrapper {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    height: auto;
    background-image: url(../img/_Leistungen.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

#service .content-wrapper .elipse {
    position: absolute;
    top: 0.1rem;
    height: 0;
    z-index: 100;
}

#service .service-image {
    display: none;
    /*visibility: hidden;*/
    z-index: 99999;
    width: 100%;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
    opacity: 0;
}

#service .service-image.show {
    display: block;
    /*visibility: visible;*/
    opacity: 1;
}

#service .text-block {
    height: auto;
    width: 25%;
    top: 30%;
}

#service .service-text-box {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-2rem);
    transform: translateX(-2rem);
    -webkit-transition: 0.6s ease;
    transition: 0.6s ease;
}

#service .service-text-box.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0rem);
    transform: translateX(0rem);
}

.service-piece {
    position: absolute;
    width: 100%;
    cursor: pointer;
}

#service .text-block {
    display: block;
    margin-left: 17%;
}

#service svg {
    width: 100vw;
    height: auto;
    bottom: -8px;
    position: absolute;
}

/* MOBILE SERVICE */

/* Accordion */

.mobile-service-item {
    cursor: pointer;
}

.mobile-service-item .hidden_content {
    margin-bottom: 4rem;
}

.mobile-service.disabled .mobile-service-item,
.mobile-service-item.active {
    cursor: auto;
}

/**************/
/*  Lightbox  */
/**************/

.lightbox-wrapper {
    position: fixed;
    width: 100%;
    min-height: 100vh;
    height: auto;
    top: 0;
    left: 0;
    z-index: 220;
    background: rgba(0, 0, 0, 0.7);
    /* display: none; */
}

.lightbox-content {
    position: absolute;
    width: calc(65vw - -160px);
    min-height: 85vh;
    height: auto;
    top: 7.5vh;
    left: calc(17.5vw - 80px);
    padding: 0 80px;
    overflow: hidden;

    /*	background: #000;*/
    /*	border: 5px solid #e7e1d3;*/
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
}

.lightbox-wrapper .swiper-container {
    position: absolute;
    width: calc(100% - 160px);
    height: 100%;
}

.swiper-container {
    overflow: visible !important;
}

.swiper-slide-next,
.swiper-slide-prev,
.swiper-slide {
    width: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
    margin: auto;
    opacity: 0 !important;
}

.swiper-slide-active {
    opacity: 1 !important;
}

.gallery-next,
.gallery-prev {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 61px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat;
}

.gallery-next {
    background: url(../img/Ananas-Ecke-Rechts-white.png);
    left: auto;
    right: -80px;
}

.gallery-prev {
    background: url(../img/Ananas-Ecke-Links-white.png);
    left: -80px;
    right: auto;
}

/*  Modal Close cross  */

.lightbox-wrapper .close {
    position: absolute;
    right: 17.5vw;
    top: 2.5rem;
    height: 2.5rem;
    width: 2.5rem;
    cursor: pointer;
    pointer-events: all;
}

.lightbox-wrapper .close::before,
.lightbox-wrapper .close::after {
    display: block;
    position: absolute;
    content: '';
    background: #fff;
    width: 100%;
    height: 0.5rem;
    border-radius: 50%;
    left: 50%;
    top: 50%;
}

.lightbox-wrapper .close::before {
    -webkit-transform: translate(-50%, -50%, 0) rotate(45deg);
    transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.lightbox-wrapper .close::after {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}

.modal {
    display: none;
}

#modal.visible {
    display: block;
    -webkit-animation: fade-in-key 1.5s;
    animation: fade-in-key 1.5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    /* or: normal */
    -webkit-animation-timing-function: lenear;
    animation-timing-function: lenear;
    /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    /* or: backwards, both, none */
}

@-webkit-keyframes fade-in-key {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-key {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#modal.invisible {
    -webkit-animation: fade-out-key 1.5s;
    animation: fade-out-key 1.5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    /* or: normal */
    -webkit-animation-timing-function: lenear;
    animation-timing-function: lenear;
    /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    /* or: backwards, both, none */
}

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

    100% {
        opacity: 0;
        display: none;
    }
}

@keyframes fade-out-key {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

/* KONTAKT */

#contact p {
    display: inline-block;
}

#contact {
    background-color: #f7f4ed;
    height: auto;
    padding: 10rem 0 15% 0;
    /* padding:10rem 0 5% 0rem;; */
}

.contact-wrapper {
    width: 100%;
}

#contact > div {
    display: inline-block;
}

.contact-maps-area {
    width: 50%;
}

.google-maps-ecke {
    margin: 0 auto;
    padding: 0 2%;
    width: 96%;
}

.contact-info {
    width: 40%;
    padding-right: 50px;
}

.contact-text {
    margin-top: 3rem;
}

.contact-text.master p:nth-child(odd) {
    width: 20rem;
}

.contact-text.master p:nth-child(even) {
    min-width: 40rem;
}

.contact-text.opening {
    width: 60rem;
}

.contact-text.opening p:not(.content-text) {
    width: 20rem;
}

#contact p a {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    color: #d5a84a;
}

#contact .last-text-line {
    width: 100%;
}

.ananas {
    position: absolute;
    opacity: 0.15;
    right: 0%;
    bottom: 0;
    width: 25%;
}

#contact .zweispaltig {
    margin: 0;
}

#contact p {
    display: inline-block;
}

.gold-link {
    color: #d5a84a;
}

/* FOOTER */

.footer {
    width: 100%;
    left: 0;
    bottom: 0px;
    position: absolute;
    z-index: 80;
}

.scroll-top-wrapper {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    bottom: 45%;
}

.footer p {
    text-align: center;
}

.footer img {
    margin: 0 auto;
}

.footer .brand {
    width: 20%;
}

.footer ul {
    position: absolute;
    bottom: 3rem;
    right: 12.5%;
}

.footer ul li {
    display: inline-block;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.footer ul li a {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.footer ul li a:hover {
    color: #d5a84a;
}

.footer .scroll-top img {
    display: block;
    cursor: pointer;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    width: 8rem;
}

.footer .scroll-top img:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.footer .scroll-top p {
    cursor: pointer;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.footer .scroll-top p:hover {
    color: #d5a84a;
}

.footer .brand {
    position: absolute;
    bottom: 10%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    width: 12%;
}

.footer .brand img {
    width: 100%;
}

.footer .footer-svg {
    pointer-events: none;
}

.footer-svg img {
    width: 100%;
}

/* Korrekturen */

.footer .footer-svg {
    /* height: 25rem; */
    height: 22.5rem;
    /* height: auto; */
}

.footer .brand {
    bottom: 15%;
}

.footer-contact {
    position: absolute;
    bottom: 3rem;
    left: 12.5%;
    width: 50%;
}

.footer-contact ul {
    position: static;
}

.footer-contact li::after {
    content: '\2022\a0';
    display: inline;
    color: #d5a84a;
    padding: 0 3px 0 8px;
}

.footer-contact li:last-child::after {
    content: none;
}

/* Scroll Animations */

#about-us .text-block {
    -webkit-transform: translate(0rem, -0rem);
    transform: translate(0rem, -0rem);
    opacity: 1;
}

.fadescroll {
    -webkit-transition: all 700ms;
    transition: all 700ms;
    opacity: 0;
}

.fade {
    opacity: 1;
}

.moveleft {
    -webkit-transition: all 400ms;
    transition: all 400ms;
    opacity: 0;
}

.left {
    -webkit-transform: translate(0rem, 0rem);
    transform: translate(0rem, 0rem);
    opacity: 1;
}

/***********************/
/****** Unterseiten ******/

.subsite-wrapper {
    position: relative;
    min-height: 100vh;
    height: auto;
    padding-top: 18%;
    background: #f7f4ed;
}

.subsite-wrapper .headline {
    max-width: 100%;
}

.imprint-section,
.data-privacy-section {
    padding: 0% 17% 50rem;
}

.data-block {
    margin-top: 4rem;
}

.imprint-data-privacy .footer {
    position: absolute;
}

subsite-wrapper a {
    color: #861f26;
}

.data-privacy-section a {
    color: #861f26;
}

.data-privacy-section h3 {
    margin-top: 20px;
}

.data-privacy-section ul {
    margin: 20px 0;
    padding-left: 20px;
}

.data-privacy-section ul li {
    list-style-type: disc;
}

/* UNTERSEITEN */
#content a {
    color: #d5a84a;
}

.page-template-default .has-2-columns {
    justify-content: center;
}

.page-template-default .has-2-columns .wp-block-column {
    flex: unset;
    /*width: -moz-fit-content;*/
}

.page-template-default .has-2-columns .wp-block-column:first-of-type {
    display: inline-table;
    margin-right: 0;
    min-width: 275px;
}

.page-template-default .has-2-columns .wp-block-column:last-of-type {
    display: block;
}

.page-template-default .has-2-columns .wp-block-column .wp-block-image img {
    max-width: unset;
}

#content.subpage .text-ecke,
#content.subpage .text-ecke-small {
    top: 25rem;
    left: calc(50% + 600px - 30rem);
    z-index: -1;
}

#content.subpage .text-ecke-small {
    -webkit-transform: translate(68%, 47%) scale(0.7);
    transform: translate(68%, 47%) scale(0.7);
    z-index: -1;
}

/* ABOUT */

.page-template-template-about {
    /* background-color: #f7f4ed; */
}

#content.about {
    padding-top: 0;
}

#content.about #about-us .text-ecke,
#content.about #about-us .text-ecke-small {
    top: 42rem;
    left: calc(50% + 600px - 30rem);
    z-index: -1;
}

#content.about #about-us {
    background-color: #e7e1d3;
}

.about
    article:last-child:not(#post-41):not(#post-157):not(#post-155):not(
        #post-295
    ) {
    max-width: 100vw;
    width: 100vw;
    margin: 0;
}

#about-us .wp-block-image img {
    max-width: 100%;
    height: calc(100vh + 21rem);
}

#about-us .wp-block-column:first-of-type {
    display: inline-block;
    height: 100%;
    /* width: 41.66666667%; */
    width: auto;
    max-width: 48%;
    margin-bottom: 0;
}

#about-us .wp-block-column:nth-of-type(2) {
    position: absolute;
    display: inline-block;
    top: 36%;
    padding: 0 8.3333%;
    width: 50.333333%;
    -webkit-transform: translate(0rem, -0rem);
    transform: translate(0rem, -0rem);
    opacity: 1;
    left: 41.66666667%;
    margin: 0;
}

#about-us .wp-block-columns {
    position: relative;
}

/* KONTAKT */

#content.contact {
    padding-top: 0;
    min-height: 100vh;
    padding-top: 30rem;
    /* background-color: #f7f4ed; */
}

#content.contact p {
    display: inline-block;
}

.contact article:last-child:not(#post-41):not(#post-157):not(#post-155) {
    max-width: 100vw;
    width: 100vw;
    margin: 0;
}

#contact .wp-block-image img {
    max-width: 100%;
    height: calc(100vh + 21rem);
}

.page-template-template-contact #content,
.page-template-template-about #content {
    margin: 0;
}

.page-template-template-about #content .wp-block-image {
    margin-bottom: 0;
}

.contact-info {
    margin: 5%;
}

.page-template-template-contact #content {
    padding-bottom: 115rem;
}

.page-template-template-about #content {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

a.button {
    color: #861f26;
    padding-right: 4rem;
    position: relative;
    width: fit-content;
    max-width: 100%;
}

a.button:after {
    content: '';
    position: absolute;
    background-image: url(../images/text_ecke.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 3rem;
    width: 3rem;
    transform: translateY(-50%) rotate(-90deg);
    right: 0;
    top: 50%;
    z-index: 50;
    pointer-events: none;
    transition: all .3s ease;
}

a.button:hover:after {
    transform: translateX(.5rem) translateY(-50%) rotate(-90deg);
}