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

.main-box {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;
margin: 2rem 0% 2rem 0%;
padding: 2rem 0 2rem 0;
border-top: 2px solid;
border-right: none;
border-bottom: 2px solid;
border-left: none;
box-sizing: border-box;
border-color: rgba(50,184,235,0.75);
}

.main-box-inner-box {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 96%;
height: 10rem;
margin: 0rem 0% 2rem 0%;
position: relative;
border-top: 2px solid;
border-right: 2px solid;
border-bottom: none;
border-left: 2px solid;
box-sizing: border-box;
border-color: #00A2F2;
}

.main-box-inner-box:last-child {
margin: 0rem 0% 0em 0%;
}

.box-inner-click {
background: #00A2F2;
}


}


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

.main-box {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 96%;
margin: 2rem 0% 2rem 0%;
padding: 4rem 0 4rem 0;
border: 2px solid;
box-sizing: border-box;
border-color: rgba(50,184,235,0.75);
}

.main-box-inner-box {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 80%;
height: 10rem;
margin: 0rem 0% 4em 0%;
position: relative;
transition: 1s;
border-top: 2px solid;
border-right: 2px solid;
border-bottom: none;
border-left: 2px solid;
box-sizing: border-box;
border-color: #00A2F2;
}

.main-box-inner-box:last-child {
margin: 0rem 0% 0em 0%;
}

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

.box-inner-click {
background: #00A2F2;
}


}