#interactive_wheel {
    width:100%;
max-width: 480px;
max-height: 480px;
margin: 1rem auto;
position: relative;
}
#interactive_wheel_wheel {
-webkit-transform: scale(0);
-ms-transform: scale(0);
    transform: scale(0);
opacity: 0;
-webkit-transition: all .75s .75s ease;
-o-transition: all .75s .75s ease;
transition: all .75s .75s ease;
}
.inView #interactive_wheel_wheel {
-webkit-transform: scale(1);
-ms-transform: scale(1);
    transform: scale(1);
opacity: 1;
}
#rotate-this{
width: 100%
}
#interactiveWheelResult {
opacity: 0;
-webkit-transition: all .75s ease;
-o-transition: all .75s ease;
transition: all .75s ease;
}
#interactiveWheelResult.loaded {
opacity: 1;
}
#interactive_wheel_instructions {
text-align: center;
font-weight: bold;
position: absolute;
z-index: 2;
background: #fff;
border-radius: 4px;
padding: 1rem;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
margin: 0;
-webkit-box-shadow: 0 0 30px rgb(0 0 0 / 30%);
    box-shadow: 0 0 30px rgb(0 0 0 / 30%);
font-family: sans-serif;
font-size: 0.925rem;
-webkit-transform: scale(0);
-ms-transform: scale(0);
    transform: scale(0);
opacity: 0;
-webkit-transition: all .75s .75s ease;
-o-transition: all .75s .75s ease;
transition: all .75s .75s ease;
}
.inView #interactive_wheel_instructions {
-webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
opacity: 1;
}
#interactive_wheel_result:before {
content: '';
border-bottom: 1.5em solid;
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
position: absolute;
top: -1.5em;
left: 50%;
height: 1.5em;
width: 1.5em;
-webkit-box-sizing: border-box;
    box-sizing: border-box;
margin-left: -1.5em;

}

#interactive_wheel_result[data-id="1"] .interactive_wheel_result_header {
background-color: #e34856;
background-color: #003da5;
}
#interactive_wheel_result[data-id="1"] {
border-color: #e34856;
border-color: #003da5;
}
#interactive_wheel_result[data-id="1"]:before {
border-bottom: 1.5em solid #e34856;
border-bottom: 1.5em solid #003da5;
}

#interactive_wheel_result[data-id="2"] .interactive_wheel_result_header {
background-color:#fe912a;
background-color: #003da5;
}
#interactive_wheel_result[data-id="2"] {
border-color: #fe912a;
border-color: #003da5;
}
#interactive_wheel_result[data-id="2"]:before {
border-bottom: 1.5em solid #fe912a;
border-bottom: 1.5em solid #003da5;
}

#interactive_wheel_result[data-id="3"] .interactive_wheel_result_header {
background-color:#ffc95c;
background-color: #003da5;
}
#interactive_wheel_result[data-id="3"] {
border-color: #ffc95c;
border-color: #003da5;
}
#interactive_wheel_result[data-id="3"]:before {
border-bottom: 1.5em solid #ffc95c;
border-bottom: 1.5em solid #003da5;
}

#interactive_wheel_result[data-id="4"] .interactive_wheel_result_header {
background-color:#67dbae;
background-color: #003da5;
}
#interactive_wheel_result[data-id="4"] {
border-color: #67dbae;
border-color: #003da5;
}
#interactive_wheel_result[data-id="4"]:before {
border-bottom: 1.5em solid #67dbae;
border-bottom: 1.5em solid #003da5;
}

#interactive_wheel_result[data-id="5"] .interactive_wheel_result_header {
background-color:#64d0da;
background-color: #003da5;
}
#interactive_wheel_result[data-id="5"] {
border-color: #64d0da;
border-color: #003da5;
}
#interactive_wheel_result[data-id="5"]:before {
border-bottom: 1.5em solid  #64d0da;
border-bottom: 1.5em solid #003da5;
}

#interactive_wheel_result[data-id="6"] .interactive_wheel_result_header {
background-color: #3bc7f1;
background-color: #003da5;
}
#interactive_wheel_result[data-id="6"] {
border-color: #3bc7f1;
border-color: #003da5;
}
#interactive_wheel_result[data-id="6"]:before {
border-bottom: 1.5em solid #3bc7f1;
border-bottom: 1.5em solid #003da5;
}

#interactive_wheel_result[data-id="7"] .interactive_wheel_result_header {
background-color: #097cb7;
background-color: #003da5;
}
#interactive_wheel_result[data-id="7"] {
border-color: #097cb7;
border-color: #003da5;
}
#interactive_wheel_result[data-id="7"]:before {
border-bottom: 1.5em solid #097cb7;
border-bottom: 1.5em solid #003da5;
}

#interactive_wheel_result[data-id="8"] .interactive_wheel_result_header {
background-color: #b91657;
background-color: #003da5;
}
#interactive_wheel_result[data-id="8"] {
border-color: #b91657;
border-color: #003da5;
}
#interactive_wheel_result[data-id="8"]:before {
border-bottom: 1.5em solid#b91657;
border-bottom: 1.5em solid #003da5;
}

#interactive_wheel_result {
border: 2px solid;
border-radius: 4px;
position: relative;
-webkit-box-shadow: 0 0 30px rgb(0 0 0 / 30%);
    box-shadow: 0 0 30px rgb(0 0 0 / 30%);
}

#interactive_wheel_result h3 {
-webkit-box-flex: 1;
-ms-flex: 1;
    flex: 1;
    margin: 0;
    padding: 0.5rem 1rem;
color: #fff;
}

#interactive_wheel_result p {
margin: 1rem 0 0 0;
font-family: sans-serif;
}
#interactive_wheel_result .interactive_wheel_result_header p {
    margin: 0 !important;
    padding: 0 1rem 0.5rem 1rem !important;
    color: #fff;
}
.interactive_wheel_result_content {
padding: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
    flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
    align-items: center;
}
#interactive_wheel_result .result_img_container {
-webkit-box-flex: 0;
-ms-flex: 0 0 35%;
    flex: 0 0 35%;
}
#interactive_wheel_result .result_img {
width: 100%;
padding-bottom: 100%;
position: relative;
}
#interactive_wheel_result .result_img div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: cover;
}
#interactive_wheel_result .result_desc_container {
padding-left: 2rem;
}
.wheel_icon {
padding: 0.5rem;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
max-width: 80px;
}
@media screen and (max-width:639px){
    .interactive_wheel_result_content {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    #interactive_wheel_result .result_img_container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        
    }
    #interactive_wheel_result .result_img {
        width: 100%;
        padding-bottom: 56.25%;
        position: relative;
        height: 0;
    }
    #interactive_wheel_result .result_desc_container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        padding: 0;
    }
}