/* General For All
–––––––––––––––––––––––––––––––––––––––––––––––––– 
orange: #F29829
blue: #8DD5E4
green: #7DBF73
yellow: #F1C22E
font-family: font-family: 'Open Sans', sans-serif;
*/
body{font-size: 100%; background-color: lightyellow;}
img{max-width: 100%;}

h2 {display: none;}
h1 {display: inherit; font-family: 'Open Sans', sans-serif; color: #F29829; font-size: 3em; text-align: center; padding-top: 40px;}
.borderblue {background-color: #8DD5E4; padding: 100px; margin-top: 40px; box-sizing: border-box;}
#orangebox {height: 100px;
  width: 100px;
  background-color: #F29829;
margin: auto;}
.boxflex {display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
width: 70%;
margin: auto;
margin-top: 50px}
#green { padding: 200px;
  background-color: #7DBF73;}
#yellow {padding: 200px;
  background-color: #F1C22E;}
.orange {padding: 100px;
    margin-left: 40px; margin-right: 40px;
  background-color: #F29829;
margin-top: 50px}


/* Tablet
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 501px) and (max-width: 800px) {
 body {background-color: lightblue;}


}
/* Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 500px)
{
 body {background-color: lightgoldenrodyellow;}
   
    h2 {display: inherit; font-family: 'Open Sans', sans-serif; color: #F29829; font-size: 3em; text-align: center; padding-top: 40px;}
    h1 {display: none;}
    #orangebox {display: none;}
    #green {order: 2;}
    #yellow {order: 1;}
    .boxflex {margin: auto;
    padding-top: 0px;}
    .orange {margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;}
}