@keyframes kaboom {
  50% {
    fill: #FFFFFF;
    transform: scale(1.2);
    /*stroke: black;*/
  }
}

@keyframes fade-color {
  50% {
    opacity: 30%;
    /*stroke: black;*/
    /*transform: scale(1.2);*/
    /*stroke: black;*/
  }
}

.bubble-container.animate-at-start {
    transform-origin: center center;
    -webkit-animation: kaboom 3s ease infinite;
    -moz-animation: kaboom 3s ease infinite;
    -ms-animation: kaboom 3s ease infinite;
    -o-animation: kaboom 3s ease infinite;
    animation: kaboom 3s ease infinite;
}
.bubble-container.animate-at-start > path{
    -webkit-animation: fade-color 3s ease infinite;
    -moz-animation: fade-color 3s ease infinite;
    -ms-animation: fade-color 3s ease infinite;
    -o-animation: fade-color 3s ease infinite;
    animation: fade-color 3s ease infinite;
}

.all-text{
    /*font-family: 'Montserrat, Open Sans, Helvetica, Arial, sans-serif';*/
    font-family: 'Montserrat', sans-serif;
    fill:#F1F1F2;
}

.unclickable-text {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}

.title-font{font-size:69.375px;}
.subtitle-font{font-size:22.5px;}
.bubble-font{font-size:18.75px;fill:#231F20;}
.vs-color{fill:#80B141;}
.evs-color{fill:#DF4C31;}
.lvs-color{fill:#81AD47;}
.tvs-color{fill:#BED865;}
.ovs-color{fill:#537033;}
.sei-color{fill:#0E76AD;}
.yv-color{fill:#F16A30;}
.sei-360-color{fill:#3CA2DA;}
.bp-color{fill:#5FC0ED;}

.bubble-container:hover > path {
    fill: #FFFFFF;
    stroke: black;
}

.half:hover > text {
    fill: #231F20;
}

@keyframes example {
    0%   {background-color: red;}
    33%  {background-color: yellow;}
    66%  {background-color: blue;}
    100%   {background-color: red;}
}

@media only screen and (min-width: 641px) {
    .main-container {
        flex-direction: row;
    }
    .column {
        width: 50%;
    }
    #placeholder-container {
        position: absolute;
        top: 30%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

}

@media only screen and (max-width: 641px) {
    .main-container {
        flex-direction: column;
    }
    .column {
        box-sizing: border-box;
        width: 100%;
    }
}

.main-container {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 700px;
}

.column {
    display: flex;
    flex-direction: column;
    /*padding: 35px;*/
    height: 100%;
    position: relative;
}

#placeholder-text, #placeholder-title {
    padding-left: auto;
    padding-right: auto;
    padding-top: auto;
}

#placeholder-title {
    font-size: 40px;
}

#placeholder-text {
    font-size: 20px;
}

#content {
    position: absolute;
    top: 10%;
    width: 90%;
}

#title {
    text-align: left;
    font-size: 30px;
    /*padding:12px;*/
}

.bubble-container:hover, #learn-more-button, #bonus-button{
    cursor: hand;
    cursor: pointer;
}

#description {
    line-height: 130%;
}

.label {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}

#learn-more-button, #bonus-button {
    position: relative;
    text-align: center;
    color: white;
    border: 1px solid white;
    border-radius: 15px;
    font-size: 18px;
    padding:6px;
    padding-left:12px;
    padding-right:12px;
    margin-right: auto;
    margin-left: auto;
}

#learn-more-link, #bonus-button-link {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   text-decoration: none;
   /* Makes sure the link doesn't get underlined */
   z-index: 10;
   /* raises anchor tag above everything else in div */
   background-color: white;
   /*workaround to make clickable in IE */
   opacity: 0;
   /*workaround to make clickable in IE */
   filter: alpha(opacity=0);
   /*workaround to make clickable in IE */
}

#learn-more-button:hover, #bonus-button:hover {
    cursor: hand;
    cursor: pointer;
    color: black;
    border: 1px solid black;
    background-color: white !important;
}

a.div-link {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   text-decoration: none;
   /* Makes sure the link doesn't get underlined */
   z-index: 10;
   /* raises anchor tag above everything else in div */
   background-color: white;
   /*workaround to make clickable in IE */
   opacity: 0;
   /*workaround to make clickable in IE */
   filter: alpha(opacity=0);
   /*workaround to make clickable in IE */
}