@media screen and (min-width: 0px) and (max-width: 700px) {

.q-and-a-box {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 96%;

margin: 3rem 0% 0rem 0%;
box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.6);
}

.q-and-a-box:last-child {
margin: 3rem 0% 3rem 0%;
}

.q-and-a-box-1-inner-1 {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;
}

.q-and-a-box-1-inner-1-circle {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 80%;
padding: 1% 0% 1% 0%;;
box-sizing: border-box;
border-radius: 0%;
margin: 3rem 0% 0% 0%;
background: #FFFFFE;
}

.q-and-a-box-1-inner-2 {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;
margin: 2rem 0% 2rem 0%;
}

.q-and-a-box-inner-3 {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 80%;
margin: 0% 0% 3rem 0%;
padding: 1% 0% 1% 0%;;
box-sizing: border-box;
background: #32B8EB;
color: #FFFFFE;
font-weight: bold;
}

.q-and-a-box-color-1 {
background: #adffad;
}

.q-and-a-box-color-2 {
background: #ffdbed;
}

.q-and-a-box-color-3 {
background: #fff3b8;
}

.q-and-a-box-color-4 {
background: #ffd1a3;
}

.q-and-a-box-color-5 {
background: #00A2F2;
color: #FFFFFE;
}

.box-space {
margin: 2rem 0 0 0;
}


}


@media screen and (min-width: 701px) { 

.q-and-a-box {
display: flex;
flex-flow: row nowrap;
justify-content: center;
width: 90%;
height: 10rem;
margin: 2rem 0% 0rem 0%;
transition: 1s;
}

.q-and-a-box:last-child {
margin: 2rem 0% 2rem 0%;
}

.q-and-a-box:hover {
box-shadow: 10px 15px 10px 0px rgba(0,0,0,0.3);
transform: translateY(-10px);
transition-duration: 0.3s;
}

.q-and-a-box-1-inner-1 {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 15%;
}

.q-and-a-box-1-inner-1-circle {
padding: 15%;
box-sizing: border-box;
border-radius: 100%;
background: #FFFFFE;
}

.q-and-a-box-1-inner-2 {
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
justify-content: center;
width: 76%;
}

.q-and-a-box-inner-3 {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 20%;
background: #00A2F2;
color: #FFFFFE;
font-weight: bold;
}

.q-and-a-box-color-1 {
background: #adffad;
}

.q-and-a-box-color-2 {
background: #ffdbed;
}

.q-and-a-box-color-3 {
background: #fff3b8;
}

.q-and-a-box-color-4 {
background: #ffd1a3;
}

.q-and-a-box-color-5 {
background: #00A2F2;
color: #FFFFFE;
}

.box-space {
margin: 2rem 0 0 0;
}


}