.xbox {   
            aspect-ratio: 1/1;
            width: 100%;
            position: relative;
            overflow:hidden;
            float: left;
            margin: 0;
            padding: 0;
        }
       .xbox.half-box {   
            aspect-ratio: 2/1;
          
            
        }
        .xbox.half-top-box {   
            aspect-ratio: 1/2;
        }

#xbgr-career {
    position:fixed;
}


#xbgr-career .xbox.unique-box .x1,
#xbgr-career .xbox.unique-box .x2,
#xbgr-career .xbox.unique-box .x3,
#xbgr-career .xbox.unique-box .x4{
	width:100%;
}
      
.x1, .x2, .x3, .x4 {
    aspect-ratio: 1/1;
    width: 50%;
    position: absolute;
    overflow:hidden;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
             
    }

.x1, .x2, .x3, .x4 {
    width: 100%;
        }

@supports not (aspect-ratio: 1/2) {
                
            .xbox::before {
                  float: left;
                  padding-top: 200%;
                  content: "";}

            .xbox::after {
                  display: block;
                  content: "";
                  clear: both;}
    }

@supports not (aspect-ratio: 2/1) {             
            .xbox::before {
                  float: left;
                  padding-top: 50%;
                  content: "";}

            .xbox::after {
                  display: block;
                  content: "";
                  clear: both;}
}

@supports not (aspect-ratio: 1/2) {
            .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;}
       
       
@keyframes slide45 {
           from {transform:translate(-101%, 101%)}
            to{transform:translate(0, 0)}
    }

@keyframes slide45full {
           from {transform:translate(-201%, 201%) rotate(135deg);}
            to{transform:translate(-61%, 10%) rotate(135deg)}
    }
       
@keyframes inslide45full {
           from {transform:translate(201%, -201%) rotate(135deg);}
            to{transform:translate(11%, -60%) rotate(135deg)}
    }  

#xbgr-career .xbox {
        width:16vw;
        max-width:25vh;
} 

#xbgr-career .xbox.half-top-box .x1, 
#xbgr-career .xbox.half-top-box .x2, 
#xbgr-career .xbox.half-top-box .x3, 
#xbgr-career .xbox.half-top-box .x4 {
            width: 100%;
}

#xbgr-career .xbox .xt, 
#xbgr-career .xbox .xb{
           width:100%;
           height:100%;
}
       
#xbgr-career-1,
#xbgr-career-2,
#xbgr-career-3,
#xbgr-career-4{
           height:auto;
           float:left;
}
      
#xbgr-career-1,
#xbgr-career-3,
#xbgr-career-4 {
          width:500vw;
}
      
#xbgr-career-1::after,
#xbgr-career-2::after,
#xbgr-career-3::after{
        content: "";
        clear: both;
        display: table;
}

#xbgr-career-2  {
        display:flex;
        width: 100%;
}

#xbgr-career-2-inn  {
        float:left;
        flex:none
}

.text-career {
        max-width: inherit;
        padding: 180px  0 0 4vw;
        float:right;
        width: 50%;  
}

.text-career .grve-section {
        max-width:700px;
        float:right;
}

#grve-main-content {
       min-height:100vh;
}

#grve-content-area  {
       min-height:calc(100vh - 200px);
}

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

@media only screen and (max-width : 768px){
    #xbgr-career-4{ display:none;}    
    
    #xbgr-career {  position:relative;
                    width: 100%;}   

    #xbgr-career .xbox {width:29vw;} 

    .text-career {  width:90%;
                    padding-top:50px;}   
}

#xbgr-career .xbox-13,
#xbgr-career .xbox-16,
#xbgr-career .xbox-25,
#xbgr-career .xbox-31,
#xbgr-career .xbox-37,
#xbgr-career .xbox-40,
#xbgr-career .xbox-43,
#xbgr-career .xbox-46,
#xbgr-career .xbox-49 {
          clear:left;
}
      
#xbgr-career .xbox-11 .x1,
#xbgr-career .xbox-13 .x1 {
        border-radius: 100%;
        overflow: hidden;
}
#xbgr-career .xbox-11 .x1 .xt,
#xbgr-career .xbox-13 .x1 .xt {
        border-radius: 100%;
        background-image: var(--black);
        animation: slide45 .3s ease-out .2s;
        animation-fill-mode: both;
        width:100%; height:100%;
}
#xbgr-career .xbox-17 .x1 {
        border-radius: 100%;
        overflow:hidden;
}

#xbgr-career .xbox-17 .x1 .xt {
        border-radius: 100%;
        background-image: var(--blue);
        animation: slide45 .3s ease-out 1.2s;
        animation-fill-mode: both;
}

#xbgr-career .xbox-1 .x1,
#xbgr-career .xbox-11 .x1,
#xbgr-career .xbox-21 .x1,
#xbgr-career .xbox-58-star .x1 {
border-radius: 100%;
        overflow:hidden;
}

#xbgr-career .xbox-1 .x1 .xt,
#xbgr-career .xbox-11 .x1 .xt,
#xbgr-career .xbox-21 .x1 .xt,
#xbgr-career .xbox-58-star .x1 .xt{
        border-radius: 100%;
        background-image: var(--red);
        animation: slide45 .3s ease-out 1.2s;
        animation-fill-mode: both;
}

#xbgr-career .xbox-14 .x1 .xb,
#xbgr-career .xbox-16 .x1 .xt,
#xbgr-career .xbox-25 .x1 .xt{   
        background-image: var(--black);
        animation: slide45 .3s ease-out;
        animation-fill-mode: both;
 }

#xbgr-career .xbox-40 .x1 .xt,
#xbgr-career .xbox-43 .x1 .xt{   
        background-image: var(--blue);
        animation: slide45 .3s ease-out;
        animation-fill-mode: both;
 }
#xbgr-career .xbox-10 .x1 .xt,
#xbgr-career .xbox-22 .x1 .xt {   
        background-image: var(--red);
        animation: slide45 .3s ease-out;
        animation-fill-mode: both;
}
    
#xbgr-career .xbox-14 .x1 .xt{
        background-image: var(--blank);
        animation: slide45 .3s ease-out .5s;
        animation-fill-mode: both;
        border-radius: 100%;
} 

#xbgr-career .xbox-50 .x1 .xt{
        background-image: var(--black);
        animation: slide45full .3s ease-out .4s;
        animation-fill-mode: both;
        width: 200%;
        height: 200%;
        background-repeat: repeat;
} 

#xbgr-career .xbox-2 .x1 .xt{
        background-image: var(--blue);
        animation: slide45full .3s ease-out .4s;
        animation-fill-mode: both;
        width: 200%;
        height: 200%;
        background-repeat: repeat;
}

#xbgr-career .xbox-12 .x1 .xt,
#xbgr-career .xbox-32 .x1 .xt,
#xbgr-career .xbox-38 .x1 .xt{
        background-image: var(--red);
        animation: slide45full .3s ease-out .4s;
        animation-fill-mode: both;
        width: 200%;
        height: 200%;
        background-repeat: repeat;
}

#xbgr-career .xbox-31 .x1 .xt{
        background-image: var(--black);
        animation: inslide45full .3s ease-out .4s;
        animation-fill-mode: both;
        width: 200%;
        height: 200%;
        background-repeat: repeat;
}

#xbgr-career .xbox-46 .x1 .xt{
        background-image: var(--blue);
        animation: inslide45full .3s ease-out .4s;
        animation-fill-mode: both;
        width: 200%;
        height: 200%;
        background-repeat: repeat;
}