@media screen and (max-width:530px){

.bubble {
    margin: 4% auto;
    width: 307px;
    background: #ffffff;
    border-radius: 30px;
    position: relative;
    z-index: 90;
    box-shadow: 0 0 7px 0 #bcbcbc;
}
.rectangle {
    background: #ffca44;
    height: 80px;
    padding-top: 22px;
    width: 312px;
    position: relative;
    /* left: -15px; */
    top: 30px;
    float: left;
    z-index: 100;
}

.rectangle1 {
    background: #00c3b6;
    height: 80px;
    padding-top: 8px;
    width: 337px;
    position: relative;
    left: -15px;
    top: 30px;
    float: left;
    z-index: 100;
}
.triangle-l {
    border-color: transparent #956d08 transparent transparent;
    border-style: solid;
    border-width: 0px;
    /* height: 0px; */
    /* width: 0px; */
    /* position: relative; */
    left: 0px;
    top:0
    /* z-index: -1; */
}
.triangle-r {
    border-color: transparent transparent transparent #956d08;
    border-style: solid;
    border-width: 15px;
    /* height: 0px; */
    /* width: 0px; */
    /* position: relative; */
    left: 0;
    /* top: 65px; */
    /* z-index: -1; */
}

.triangle-l1 {
    border-color: transparent #007c74 transparent transparent;
    border-style: solid;
    border-width: 0px;
    /* height: 0px; */
    /* width: 0px; */
    /* position: relative; */
    left: 0px;
    top:0
    /* z-index: -1; */
}

.triangle-r1 {
    border-style: solid;
    border-width: 15px;
    /* height: 0px; */
    /* width: 0px; */
    /* position: relative; */
    left: 0;
    /* top: 65px; */
    /* z-index: -1; */
}
		
}

@media screen and (max-width:430px){

.bubble {
    margin: 4% auto;
    width: 307px;
    background: #ffffff;
    border-radius: 30px;
    position: relative;
    z-index: 90;
    box-shadow: 0 0 7px 0 #bcbcbc;
}
.rectangle {
    background: #ffca44;
    height: 80px;
    padding-top: 22px;
    width: 312px;
    position: relative;
    /* left: -15px; */
    top: 30px;
    float: left;
    z-index: 100;
}

.rectangle1 {
    background: #00c3b6;
    height: 80px;
    padding-top: 8px;
    width: 337px;
    position: relative;
    left: -15px;
    top: 30px;
    float: left;
    z-index: 100;
}
.triangle-l {
    border-color: transparent #956d08 transparent transparent;
    border-style: solid;
    border-width: 0px;
    /* height: 0px; */
    /* width: 0px; */
    /* position: relative; */
    left: 0px;
    top:0
    /* z-index: -1; */
}
.triangle-r {
    border-color: transparent transparent transparent #956d08;
    border-style: solid;
    border-width: 15px;
    /* height: 0px; */
    /* width: 0px; */
    /* position: relative; */
    left: 0;
    /* top: 65px; */
    /* z-index: -1; */
}

.triangle-l1 {
    border-color: transparent #007c74 transparent transparent;
    border-style: solid;
    border-width: 0px;
    /* height: 0px; */
    /* width: 0px; */
    /* position: relative; */
    left: 0px;
    top:0
    /* z-index: -1; */
}

.triangle-r1 {
    border-style: solid;
    border-width: 15px;
    /* height: 0px; */
    /* width: 0px; */
    /* position: relative; */
    left: 0;
    /* top: 65px; */
    /* z-index: -1; */
}
		
}

}