:root {
	--lines-hz: url('https://www.dauss.es/wp-content/themes/dauss/images/lines-hz.png');
	--lines-vt: url('https://www.dauss.es/wp-content/themes/dauss/images/lines-vt.png'); 
}
@keyframes Slide-in {
     from {
         transform:translateY(-101%)
    }
     to {
        transform:translateY(0)
    }
}
 @keyframes Slide-out {
     from {
        transform:translateY(0)
    }
     to {
        transform:translateY(-101%)
    }
}
 @keyframes Rotaty-inx {
     from {
        transform:rotate(-95deg)
    }
     to {
        transform: rotate(0deg)
    }
}
 @keyframes Rotaty-outx {
     from {
        transform:rotate(0deg)
    }
     to {
        transform: rotate(-95deg)
    }
}
 @keyframes Rotaty-inv {
     from {
        transform:rotate(90deg)
    }
     to {
        transform: rotate(0deg)
    }
}
 @keyframes Rotaty-int {
     from {
        transform:rotate(0deg)
    }
     to {
        transform: rotate(90deg)
    }
}
 @keyframes FadeOut {
     from {
        opacity: 1;
    }
     to {
        opacity: 0;
    }
}
 @keyframes FadeBgrTwo {
     1% {
        opacity: 0;
    }
     2% {
        opacity: 1;
    }
     99% {
        opacity: 1;
    }
     100% {
        opacity: 0;
    }
}
 @keyframes FadeBgr {
     0 {
        opacity: 1;
    }
     100% {
        opacity: 0;
    }
}
 @keyframes Slide-inX {
     from {
         transform:translateX(-101%)
    }
     to {
        transform:translateY(0)
    }
}
 @keyframes Slide-outX {
     from {
        transform:translateX(0)
    }
     to {
        transform:translateY(-101%)
    }
}
 .xbox {
     aspect-ratio: 1/1;
     position: relative;
     overflow:hidden;
     margin: 0;
     padding: 0;
	 width:28.57vh;
	 height:auto;
	 max-width:100%;
}



 .x1, .x2, .x3, .x4 {
     aspect-ratio: 1/1;
     width: 50%;
     position: absolute;
     overflow:hidden;
     background-repeat: no-repeat;
     margin: 0;
     padding: 0;
}
 @supports not (aspect-ratio: 1/1) {
     .x1::before, .x2::before, .x3::before, .x4::before {
         float: left;
         padding-top: 100%;
         content: "";
    }
     .x1::after, .x2::after, .x3::after, .x4::after {
         display: block;
         content: "";
         clear: both;
    }
     .xbox::before {
         float: left;
         padding-top: 100%;
         content: "";
    }
     .xbox::after {
         display: block;
         content: "";
         clear: both;
    }
}
 .x1 {
    left:0;
     top:0;
}
 .x2 {
    right:0;
     top:0;
}
 .x3 {
    left:0;
     bottom:0;
}
 .x4 {
    right:0;
     bottom:0;
}
 .xt, .xb {
     height: 101%;
     width: 101%;
     position: absolute;
     overflow:hidden;
     background-repeat: no-repeat;
     margin: 0;
     padding: 0;
}
 .xt {
    z-index:6;
}
 .xb {
     z-index:5;
}
 .xbgr-contact .xbox-1 .x1 .xt {
     background-image: var(--red);
     border-radius: 0 0 0 100% ;
     animation: Rotaty-inv .3s ease-out .6s;
     animation-fill-mode: both;
     transform-origin: right top ;
     top:-1%;
}
 .xbgr-contact .xbox-1 .x2 .xt {
     background-image: var(--red);
     border-radius: 0 0 100% 0;
     animation: Rotaty-inv .3s ease-out .8s;
     animation-fill-mode: both;
     transform-origin: left top ;
     left:-1%;
     top:-1%;
}
 .xbgr-contact .xbox-1 .x3 .xt {
     background-image: var(--black);
     border-radius: 0 0 0 100% ;
     animation: Rotaty-inv .3s ease-out .9s;
     animation-fill-mode: both;
     transform-origin: right top ;
     top:-1%;
}
 .xbgr-contact .xbox-1 .x4 .xt {
     background-image: var(--black);
     border-radius: 0 0 100% 0;
     animation: Rotaty-inv .3s ease-out 1.1s;
     animation-fill-mode: both;
     transform-origin: left top ;
     left:-1%;
     top:-1%;
}
 .xbgr-contact .xbox-2 .x1 .xt {
     background-image: var(--lines-hz);
     border-radius: 100% 0 0 0;
     animation: Rotaty-inx .3s ease-out 1.3s;
     animation-fill-mode: both;
     transform-origin: right bottom;
	 background-position: left bottom;
}
 .xbgr-contact .xbox-2 .x2 .xt {
     background-image: var(--lines-hz);
     border-radius: 0 100% 0 0;
     animation: Rotaty-inx .3s ease-out 1.5s;
     animation-fill-mode: both;
     transform-origin: left bottom;
     left:-1%;
	 background-position: left bottom;
}
 .xbgr-contact .xbox-2 .x3 .xt {
     background-image: var(--lines-hz);
     border-radius: 0 0 0 100% ;
     animation: Rotaty-inv .3s ease-out 1.6s;
     animation-fill-mode: both;
     transform-origin: right top ;
     top:-1%;
	 background-position: 0 -1px;
}
 .xbgr-contact .xbox-2 .x4 .xt {
     background-image: var(--lines-hz);
     border-radius: 0 0 100% 0;
     animation: Rotaty-inv .3s ease-out 1.8s;
     animation-fill-mode: both;
     transform-origin: left top ;
     left:-1%;
     top:-1%;
	 background-position: 0 -1px;
}
 .xbgr-contact .xbox-3 .x1 .xt {
     background-image: var(--red);
     border-radius: 0 0 0 100% ;
     animation: Rotaty-inv .3s ease-out 1.9s;
     animation-fill-mode: both;
     transform-origin: right top ;
     top:-1%;
}
 .xbgr-contact .xbox-3 .x2 .xt {
     background-image: var(--red);
     border-radius: 0 0 100% 0;
     animation: Rotaty-inv .3s ease-out 2.1s;
     animation-fill-mode: both;
     transform-origin: left top ;
     left:-1%;
     top:-1%;
}
.xbgr-contact .xbox-3 .x3 .xt {
     background-image: var(--lines-vt);
     border-radius: 0 0 0 100% ;
     animation: Rotaty-inv .3s ease-out 2.2s;
     animation-fill-mode: both;
     transform-origin: right top ;
     top:-1%;
	 background-position: right top;
}
 .xbgr-contact .xbox-3 .x4 .xt {
     background-image: var(--lines-vt);
     border-radius: 0 0 100% 0;
     animation: Rotaty-inv .3s ease-out 2.4s;
     animation-fill-mode: both;
     transform-origin: left top ;
     left:-1%;
     top:-1%;
	 background-position: -1px 0;
}
 .xbgr-contact .xbox-4 .x1 .xt {
     background-image: var(--black);
     border-radius: 100% 0 0 0;
     animation: Rotaty-inx .3s ease-out 2.5s;
     animation-fill-mode: both;
     transform-origin: right bottom;
}
 .xbgr-contact .xbox-4 .x2 .xt {
     background-image: var(--black);
     border-radius: 0 100% 0 0;
     animation: Rotaty-inx .3s ease-out 2.7s;
     animation-fill-mode: both;
     transform-origin: left bottom;
     left:-1%;
}

#grve-main-content .grve-container {
     padding-top: 0 !important; 
     padding-bottom:0 !important;
}