.sweet-spot-common div{
    width: 240px;
    height: 240px;
    position: absolute;
    border-radius: 50%;
}
.mobilecontainer{
    position: relative;
    margin-top: 20px;
    left: 6px;
}
.outer {
    /* background-color: lightcoral; */
    z-index: 10;
}
.outer:hover {
    /* background-color: red; */
    z-index: 15;
}
#outer1 {
    left: 0px;
    top: 0px;
    border: 1px solid #FFFFFF;
}
#outer1:hover{
    background-color: #FF44E8; 
    border: 1px solid #FF44E8;
    -ms-transform: scale(1.2);          
    -webkit-transform: scale(1.2);      
    transform: scale(1.2); 
}
#outer1:hover > .sweet-spot-owned-media{
    color: #000000 !important;
    left: 90px;
}
#outer2 {
    left: 170px;
    top: 0px;
    border: 1px solid #FFFFFF;
}
#outer2:hover {
    background-color: #FFB5EF; 
    border: 1px solid #FFB5EF;
    -ms-transform: scale(1.2);          
    -webkit-transform: scale(1.2);      
    transform: scale(1.2); 
}
#outer2:hover > .sweet-spot-paid-media{
    color: #000000 !important;
}
#outer3 {
    left: 85px;
    top: 150px;
    border: 1px solid #FFFFFF;
}
#outer3:hover {
    background-color: #FFFFFC; 
    border: 1px solid #FFFFFC;
    -ms-transform: scale(1.2);          
    -webkit-transform: scale(1.2);      
    transform: scale(1.2); 
}
#outer3:hover > .sweet-spot-earned-media{
    color: #000000 !important;
    top: 85px;
}
.mid {
    z-index: 20;
}
#midw1 {
    left: 0px;
    top: 0px;
    overflow: hidden;
}
#mid1 {
    left: 170px;
    top: 0px;
    background: unset;
}
#mid1:hover {
    background: linear-gradient(90deg, rgba(255,68,232,1) 0%, rgba(255,181,239,1) 100%);
}
#midw2 {
    left: 0px;
    top: 0px;
    overflow: hidden;
}
#mid2 {
    left: 85px;
    top: 150px;
    background: unset; 
}
#mid2:hover {
    background: linear-gradient(90deg, rgba(255,68,232,1) 0%, rgba(255,255,252,1) 100%);
}
#midw3 {
    left: 170px;
    top: 0px;
    overflow: hidden;
}
#mid3 {
    left: -85px;
    top: 150px;
    background: unset;
}
#mid3:hover {
    background: linear-gradient(90deg, rgba(255,68,232,1) 0%, rgba(255,181,239,1) 100%);
}
.innerw {
    left: 0px;
    top: 0px;
    overflow: hidden;
}
.innerw2 {
    left: 170px;
    top: 0px;
    overflow: hidden;
}
.inner {
    left: -85px;
    top: 150px;
    z-index: 20;
    background-color: unset;
}
.inner:hover {
    background: linear-gradient(to top, #ff44e8, #fffffc, #FFB5EF);
}

@media (max-width: 1000px){
    #outer1:hover{
        -ms-transform: scale(1.15);          
        -webkit-transform: scale(1.15);      
        transform: scale(1.15); 
    }
    #outer1:hover > .sweet-spot-owned-media-mobile{
        color: #000000 !important;
        left: 60px !important;
    }
    #outer2:hover {
        -ms-transform: scale(1.15);          
        -webkit-transform: scale(1.15);      
        transform: scale(1.15); 
    }
    #outer2:hover > .sweet-spot-paid-media-mobile{
        color: #000000 !important;
        left: 70px !important;
    }
    #outer3:hover {
        -ms-transform: scale(1.15);          
        -webkit-transform: scale(1.15);      
        transform: scale(1.15); 
    }
    #outer3:hover > .sweet-spot-earned-media-mobile{
        color: #000000 !important;
        left: 60px !important;
        top: 65px !important;
    }
}

@media (max-width: 1000px){
    #outer1:hover{
        -ms-transform: scale(1.05);          
        -webkit-transform: scale(1.05);      
        transform: scale(1.05); 
    }
    #outer1:hover > .sweet-spot-owned-media-mobile{
        color: #000000 !important;
        left: 60px !important;
    }
    #outer2:hover {
        -ms-transform: scale(1.05);          
        -webkit-transform: scale(1.05);      
        transform: scale(1.05); 
    }
    #outer2:hover > .sweet-spot-paid-media-mobile{
        color: #000000 !important;
        left: 70px !important;
    }
    #outer3:hover {
        -ms-transform: scale(1.05);          
        -webkit-transform: scale(1.05);      
        transform: scale(1.05); 
    }
    #outer3:hover > .sweet-spot-earned-media-mobile{
        color: #000000 !important;
        left: 60px !important;
        top: 65px !important;
    }
}

@media (max-width: 500px){
    .sweet-spot-common div{
        width: 180px;
        height: 180px;        
    }
    #outer2 {
        left: 130px;
    }
    #outer3 {
        left: 65px;
        top: 110px;
    }
    #outer1:hover{
        -ms-transform: scale(1.15);          
        -webkit-transform: scale(1.15);      
        transform: scale(1.15); 
    }
    #outer1:hover > .sweet-spot-owned-media-mobile{
        color: #000000 !important;
        left: 60px !important;
    }
    #outer2:hover {
        -ms-transform: scale(1.15);          
        -webkit-transform: scale(1.15);      
        transform: scale(1.15); 
    }
    #outer2:hover > .sweet-spot-paid-media-mobile{
        color: #000000 !important;
        left: 70px !important;
    }
    #outer3:hover {
        -ms-transform: scale(1.15);          
        -webkit-transform: scale(1.15);      
        transform: scale(1.15); 
    }
    #outer3:hover > .sweet-spot-earned-media-mobile{
        color: #000000 !important;
        left: 60px !important;
        top: 65px !important;
    }
    #mid1 {
        left: 130px;
    }
    #mid1:hover {
        background: linear-gradient(90deg, rgba(255,68,232,1) 0%, rgba(255,181,239,1) 100%);
    }
    #mid2 {
        left: 65px;
        top: 110px;
        background: unset; 
    }
    #midw3 {
        left: 130px;
    }
    #mid3 {
        left: -65px;
        top: 110px;
        background: unset;
    }
    .innerw2 {
        left: 130px;
        top: 0px;
        overflow: hidden;
    }
    .inner {
        left: -65px;
        top: 110px;
        z-index: 20;
        background-color: unset;
    }
}

@media (min-width: 600px) and (max-width: 749px){

    .mobilecontainer{
        position: relative;
        margin-top: 20px;
        margin-left: 15%;
    }
    #outer1:hover{
        -ms-transform: scale(1.2);          
        -webkit-transform: scale(1.2);      
        transform: scale(1.2); 
    }
    #outer1:hover > .sweet-spot-owned-media-mobile{
        color: #000000 !important;
        left: 90px !important;
        top: 90px !important;
    }
    #outer2:hover {
        -ms-transform: scale(1.2);          
        -webkit-transform: scale(1.2);      
        transform: scale(1.2); 
    }
    
    #outer2:hover > .sweet-spot-paid-media-mobile{
        color: #000000 !important;
        left: 100px !important;
        top: 100px !important;
    }
    #outer3:hover {
        -ms-transform: scale(1.2);          
        -webkit-transform: scale(1.2);      
        transform: scale(1.2); 
    }
    #outer3:hover > .sweet-spot-earned-media-mobile{
        color: #000000 !important;
        left: 90px !important;
        top: 100px !important;
    }
}

@media (min-width: 500px) and (max-width: 599px){

    .mobilecontainer{
        position: relative;
        margin-top: 20px;
        margin-left: 3%;
    }
    #outer1:hover{
        -ms-transform: scale(1.2);          
        -webkit-transform: scale(1.2);      
        transform: scale(1.2); 
    }
    #outer1:hover > .sweet-spot-owned-media-mobile{
        color: #000000 !important;
        left: 90px !important;
        top: 90px !important;
    }
    #outer2:hover {
        -ms-transform: scale(1.2);          
        -webkit-transform: scale(1.2);      
        transform: scale(1.2); 
    }
    #outer2:hover > .sweet-spot-paid-media-mobile{
        color: #000000 !important;
        left: 100px !important;
        top: 100px !important;
    }
    #outer3:hover {
        -ms-transform: scale(1.2);          
        -webkit-transform: scale(1.2);      
        transform: scale(1.2); 
    }
    #outer3:hover > .sweet-spot-earned-media-mobile{
        color: #000000 !important;
        left: 90px !important;
        top: 100px !important;
    }

}