/* medium phone styles*/
@media screen and (min-width:250px max-width: 750px) {
p {font-size: 8px; grid-template-column:2;}

div {display: inline-block;} 
h3 {font-size: 10px; color: blue }



.page-wrapper {display: grid; grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;}
aside .wrapper .design-selection, aside .wrapper > div {
    
    text-align: center;
    ;
}
.supporting footer {
    font-size: 18px;
}
.supporting footer {
    background: #00374f;
    font-size: 22px;
    height: 65px;
    text-align: center;
    width: 100%;
}
.intro .preamble h3, .intro .preamble p {
    width: 85%;
    margin: 0 auto;
}
.intro .preamble {
    top: 433px; width: }
.intro .preamble {
    background: rgba(255, 255, 255, 0.9);
    border-top: 5px solid #dd3b2a;
    bottom: 0;
    margin: 0;
    max-width: none;
    padding: 25px 0;
    position: absolute;
    top: auto;
    width: 100%;
}

.preamble {
    left: auto;
    margin: 0 2.5% 0 5%;
    top: 413px;
    width: 42.5%;
}
.preamble {
    clear: left;
    float: left;
    left: 50%;
    margin-left: -520px;
    max-width: 495px;
    position: relative;
    top: 298px;
    width: 50%;
    z-index: 4;
}

.explanation {
    margin: 0 5% 0 2.5%;
    width: 42.5%;
}
.explanation {
    float: none;
    left: auto;
    margin: 0;
    max-width: none;
    padding: 0 7.5% 10px;
    width: 85%; display: inline;
}
	.supporting > * {
    float: left;
    width: 50%;
}
.participation {
    columns: 1;
    border-top: 5px solid #EBFFD8;
    padding-top: 15px;
    width: 100%; display: inline;
}
.requirements {
    padding: 0 7.5%;
    width: 85%; display: inline; position: relative; margin-left: -40%;
}
.benefits {
    display: inline;
    border-bottom: 5px solid #EBFFD8;
    margin-bottom: 25px;
    padding: 150px 0 50px 0;
     position: relative;
}

#css-zen-garden {background-size: cover;}

}



/* media query for browser these styles will be applied when the screen is larger thatn 1200px. */
@media screen and (min-width: 751px max-width:1040px) {

	#css-zen-garden {background-size: cover;}

.intro {
    height: 700px;
}
.preamble {
    left: auto;
    margin: 0 2.5% 0 5%;
    top: 413px;
    width: 42.5%;
}
.preamble {
    clear: left;
    float: left;
    left: 50%;
    margin-left: -520px;
    max-width: 495px;
    position: relative;
    top: 298px;
    width: 50%;
    z-index: 4;
}
 .benefits {
    
    border-bottom: 5px solid #EBFFD8;
    margin-bottom: 25px;
    padding: 150px 0 50px 0;
    width: 100%;
}
.explanation {
    margin: 0 5% 0 2.5%;
    width: 42.5%;
}
.explanation {
    float: left;
    margin-left: 1.5%;
    max-width: 495px;
    padding-bottom: 15px;
    position: relative;
    left: 50%;
}
}
	.supporting > * {
    float: left;
    width: 50%;
}
.participation {
    
    border-top: 5px solid #EBFFD8;
    padding-top: 15px;
    width: 100%;
}
.requirements {
    left: auto;
    margin-left: 0;
    padding: 0 5%;
    width: 90%;
}
.requirements {
    left: 50%;
    margin-left: -57%;
    max-width: 1040px;
    min-height: 350px;
    position: relative;
    width: 100%;
}
.explanation {
    margin: 0 5% 0 2.5%;
    width: 42.5%;
}
.explanation {
    float: left;
    margin-left: 1.5%;
    max-width: 495px;
    padding-bottom: 15px;
    position: relative;
    left: 50%;
}
aside .wrapper {
    padding: 40px 5% 30px;
    width: 50%;
}
aside .wrapper {
    
    border-top: 5px solid #EBFFD8;
    margin: -5px auto 0;
    max-width: 1040px;
    padding: 40px 0 30px 0;
    position: relative;
    width: 100%;
    z-index: 2;
}
}