.hero-top-margin{
    margin-top: 180px; 
    max-width: 830px
}

.phone .hero-top-margin{
    margin-top: 80px; 

}

.highlight {
background: url("/SPEAK_Major_StyleGuide/img/underlinehero.png?10474");
background-repeat: no-repeat;
background-size: 100% auto;
padding: 8px 0;
background-position: bottom;
}


.hero-slider {
    position: absolute; 
    width: 100%;
    left: 100%;
    bottom: 0;
    z-index: 1;
}


.phone-baloons {
    display:none;
}

.phone .phone-baloons {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: initial;
}
.phone .hero-slider {
    display: none;
}

.phone .hero-baloon {
    display: none;
}

.phone .button-hero {
    text-align: center;
}

/*.phone .button-hero  .Button {
    display: inline-flex;
    width: unset;
    margin-left: unset;
}*/


.phone .hero-container {
    padding-bottom: 100px;
}

.slider{
   height: 400px;
   left: 32px;
   position: relative;
}


.img-1-wrapper{
    position: absolute; 
    left: 50%; 
    bottom: -50px;
}

.img-1-position{
    transform: rotatex(180deg) rotatey(180deg);
}

.img-1-text{
    position:absolute; 
    top: 40%; 
    width: 100%; 
    text-align: center;
}

.img-2-wrapper{
    position: absolute; 
    right:55%;
    top: -20px;
}

.img-2-position{
    width: 80px;
}

.img-2-text{
   position:absolute; 
   top: 30%; 
   width: 100%; 
   text-align: center;
}

.img-3-wrapper{
    position: absolute; 
    right:40%; 
    top: 10px;
}

.img-3-position{
   width: 60px; 
   transform: rotatex(180deg);
}

.img-3-text{
   position:absolute; 
   top: 20%; 
   width: 100%; 
   text-align: center;
}

.img-4-wrapper{
   position: absolute; 
   left:-10%; 
   top: 60%;
}

.img-4-position{
   width: 50px;
}

.img-4-text{
   position:absolute; 
   top: 20%; 
   width: 100%; 
   text-align: center;
}

.phone-baloon-1-wrapper{
    position: absolute; 
    left:10%; 
    bottom: -140px;
}

.phone-baloon-1-position{
    width: 90px;
}

.phone-baloon-1-text{
    position:absolute; 
    top: 30%; 
    width: 100%; 
    text-align: center;
}

.phone-baloon-2-wrapper{
    position: absolute; 
    left:40%; 
    bottom: -90px;
}

.phone-baloon-2-position{
    width: 50px;
}

.phone-baloon-2-text{
    position:absolute; 
    top: 20%; 
    width: 100%; 
    text-align: center;
}

.phone-baloon-3-wrapper{
    position: absolute; 
    left: 60%; 
    bottom: -150px;
}

.phone-baloon-3-position{
    transform: rotatex(180deg) rotatey(180deg);
}

.phone-baloon-3-text{
    position:absolute; 
    top: 40%; 
    width: 100%; 
    text-align: center;
}

.svg-container{
    margin-top: -1px; 
    margin-left: -1px;
}