html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    @import url('https://fonts.googleapis.com/css?family=EB+Garamond|Open+Sans|Julius+Sans+One');
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    font-family: 'Open Sans', sans-serif;
    font-weight:100;
    text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
    text-align: center;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*---END RESET---*/



.intro h1{
    /*--hide text---*/
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    /*--hide text---*/
    background-image: url(images/CSSlarge.svg);
    background-repeat: no-repeat;
    background-size:100%;    
}

.summary a{
    color:#ae03e2;
}

.summary a:hover{
    color:magenta;
}

header h2{
    color:#895C99;
    width:30%;
    margin:auto;
    
}

.summary{
    margin-bottom:2vw;
}

.summary p{
    width:50%;
    color:#895C99;
    margin:auto;
}

.preamble h3{
    /*--hide text---*/
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    /*--hide text---*/
    background-image:url(images/ROAD.svg);
    background-repeat: no-repeat;
    background-size:100%;
    padding:6.3vw;
    box-sizing: border-box;
}

#zen-preamble{
    width:;
}

.preamble p{
    font-size:1em;
    color:#0101a8;
    width:90%;
    margin: auto;
}

.explanation{
    
    
}

.explanation h3{
    /*--hide text---*/
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    /*--hide text---*/
    background-image:url(images/ABOUT.svg);
    background-repeat: no-repeat;
    background-size:100%;
    padding:5vw;
    box-sizing: border-box;
}

.explanation p{
    color:#007b63;
}

.participation h3{
    /*--hide text---*/
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    /*--hide text---*/
    background-image:url(images/PART.svg);
    background-repeat: no-repeat;
    background-size:100%;
    padding:5vw;
    box-sizing: border-box;
}

.participation p{
    color:#035503;
}

.participation a{
    color:white;
}

.benefits h3{
    /*--hide text---*/
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    /*--hide text---*/
    background-image:url(images/BENEFIT.svg);
    background-repeat: no-repeat;
    background-size:100%;
    padding:5vw;
    box-sizing: border-box;
}

.benefits p{
    color:#988702;
}

.requirements h3{
    /*--hide text---*/
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    /*--hide text---*/
    background-image:url(images/REQUIREMENT.svg);
    background-repeat: no-repeat;
    background-size:100%;
    padding:5vw;
    box-sizing: border-box;
}

.requirements p{
    color:#9a6403;
}

.requirements a{
    color:white;
}

/*--FOOTER--*/

aside{
    color:#b90202;
}

aside a{
    color:white;
}

aside a:hover{
    color:red; 
}

footer a:hover{
    background-color: red;
    color:white;
}

.zen-validate-html{
    padding:20px 10px;box-sizing: border-box;
    background-color: white;
    color:red;text-decoration: none;
}

.zen-validate-css{
    padding:20px 20px;box-sizing: border-box;
    background-color: white;
    color:red;text-decoration: none;
}

.zen-license{
    padding:20px 20px;box-sizing: border-box;
    background-color: white;
    color:red;text-decoration: none;
}

.zen-accessibility{
    padding:20px 10px;box-sizing: border-box;
    background-color: white;
    color:red;text-decoration: none;
}

.zen-github{
    padding:20px 20px;box-sizing: border-box;
    background-color: white;
    color:red;text-decoration: none;
}



/*---RESPONSIVE---*/

@media screen and (min-width:1500px){
    #css-zen-garden{
        background:url(images/bkgd1200.svg);
        background-repeat: no-repeat;
        background-size:cover;
        width:90%;margin:auto;
    }
    
        .intro{
            margin:auto;
            width:30%;
        }

            .intro h1{
                padding-top:19vw;
                box-sizing: border-box;
                width:60%;margin:auto;

            }

            header h2{
                padding-bottom: 1vw;box-sizing: border-box;
            }

            .summary p{
                width:100%;
            }
    
        .preamble h3{
            width:;
        }

            #zen-preamble{
                background-image: url(images/ROADbkgd1200.svg);
                background-repeat: no-repeat;
                padding-bottom:10vw;
                box-sizing: border-box;
                background-size:100%;
                margin-bottom:;
            }
    
    .explanation h3{
        width:20%;margin: auto;
        padding-top:11vw;
    }
    
        #zen-explanation{
            background-image: url(images/ABOUTBKGD.svg);
            background-repeat: no-repeat;
            background-size:100%;
            padding-bottom:4vw;
        }
    
        .explanation p{
        width:25%;
        margin-top:-25vh;
        margin-left:12vw;
        padding:1vw;
        box-sizing: border-box;
        float:left;
    }
    
    .explanation p:last-child{
        float:right;
        margin-right:12vw;
    }
    
    .participation h3{
        width:30%;margin:auto;
        padding-top:9vw;box-sizing: border-box;
    }
    
    #zen-participation{
        background-image: url(images/PARTbkgd.svg);
        background-repeat: no-repeat;
        background-size:100%;
        padding:2vw;
    }
    
    .benefits h3{
        width:20%;margin: auto;
        padding-top:6.5vw;box-sizing: border-box;
    }
    
    .benefits p{
        width:30%;
        float:left;
        margin-top:-15vh;
        margin-left:10vw;
    }
    
    #zen-benefits{
        background-image: url(images/BENEFITBKGD.svg);
        background-repeat:no-repeat;
        background-size: 50%;
    }
    
    .requirements h3{
        width:30%;margin: auto;
        padding-top:12vw;box-sizing: border-box;
    }
    
    #zen-requirements{
        background-image: url(images/REQBKGD.svg);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    
    .sidebar{
        background-image: url(images/RTbkgd1200.svg);
        background-repeat: no-repeat;
        background-size:100%;
    }
}

@media screen and (max-width:1499px) and (min-width:1025px){
    #css-zen-garden{
        background:url(images/bkgd1200.svg);
        background-repeat: no-repeat;
        background-size:cover;
        width:90%;margin:auto;
    }
    
    .intro{
        width:60%;
        margin:auto;
        }

            .intro h1{
                padding-top:16vh;
                box-sizing: border-box;
                width:35%;margin:auto;
                padding-bottom:16vh;

            }

            header h2{
                padding-bottom: 1vw;box-sizing: border-box;
            }

            .summary p{
                width:100%;
            }
    
    .preamble h3{
        padding-top:10vw;
        box-sizing: border-box;
    }
    
    #zen-preamble{
        background-image:url(images/ROADbkgd1000.svg);
        background-repeat:no-repeat;
        background-size:100%;
        padding-bottom:12vh;
        box-sizing: border-box;
        width:60%;
        margin:auto;
    }
    
    #zen-preamble p{
        width:90%;
    }
    
    .explanation h3{
        width:22%;margin:auto;
        padding-bottom:18vh;
        box-sizing:border-box;
        margin-top:1vh;
    }
    
    .explanation p{
        width:25%;
        margin-top:-25vh;
        margin-left:12vw;
        padding:1vw;
        box-sizing: border-box;
        float:left;
    }
    
    .explanation p:last-child{
        float:right;
        margin-right:12vw;
    }
    
    #zen-explanation{
        background-image:url(images/ABOUTbkgd800.svg);
        background-repeat: no-repeat;
        background-size:100%;
        padding-bottom:5vh;
    }
    
    .participation h3{
        width:35%;
        margin: auto;
        padding:8vw;
        box-sizing: border-box;
    }
    
    #zen-participation{
        background-image:url(images/PARTbkgd.svg);
        background-repeat: no-repeat;
        background-size:79%;
        background-position: center;
        padding-top: 3vh;
        padding-bottom:3vh;
        margin-top:3vh;
        margin-bottom:3vw;
    }
    
    #zen-participation p{
        width:50%; margin:auto;
    }
    
    .benefits h3{
        width:30%;margin: auto;
        padding-bottom: 17vh;
    }
    
    .benefits p{
        width:30%;float:left;
        margin-left:6vw;
        margin-top:-20vh;
    }
    
    #zen-benefits{
        background-image: url(images/BENEFITBKGD.svg);
        background-repeat:no-repeat;
        background-size:50%;
    }
    
    .requirements h3{
        width:35%;margin: auto;
        padding-bottom: 18vh;
        box-sizing: border-box;
    }
    
    .requirements p{
        width:20%;margin:auto;
        float:left;
        padding:5vw;
    }
    
    #zen-requirements{
        background-image: url(images/REQBKGD.svg);
        background-repeat: no-repeat;
        background-size:100%;
        padding-bottom: 65vw;
        box-sizing:border-box;
    }
    
    .sidebar{
        background-image: url(images/ROADbkgd1200.svg);
        background-repeat:no-repeat;
        background-size:100%;
    }
}

@media screen and (max-width:1024px) and (min-width:501px){
    #css-zen-garden{
        background:url(images/bkgd800.svg);
        background-repeat:no-repeat;
        background-size:cover;
        width:90%;margin: auto;
    }
    
    .intro p{
        
    }
    
    .intro h1{
        padding-top:34vw;
        box-sizing: border-box;
        width:35%;margin:auto;
    }
    
    header h2{
        padding-bottom: 3vw;box-sizing: border-box;
    }
    
    .preamble h3{
        width:100%;margin: auto;
        padding-top: 23vw;
    }
    
    #zen-preamble{
        background-image:url(images/ROADbkgd.svg);
        background-repeat:no-repeat;
        background-size:100%;
        width:70%;
        margin:auto;
        padding-bottom: 12vw;box-sizing: border-box;
    }
    
    #zen-preamble p{
        line-height: 1em;
    }
    
    .explanation h3{
        width:30%;margin: auto;
        padding-top:18vw;
    }
    
    .participation h3{
        width:55%;margin:auto;
        padding-top:20vw;box-sizing: border-box;
    }
    
    .benefits h3{
        width:30%;margin: auto;
        padding-top:18vw;box-sizing: border-box;
    }
    
    .requirements h3{
        width:45%;margin: auto;
        padding-top:20vw;box-sizing: border-box;
    }
    
    .sidebar{
        background-image: url(images/RTbkgd800.svg);
    }
    
}

@media screen and (max-width:500px){
    #css-zen-garden{
        background:url(images/bkgd400.svg);
        background-repeat: no-repeat;
        background-size:cover;
        width:100%; margin: auto;
    }
    .intro{
        margin:0 10% 0 10%;
    }
    
    .intro h1{
        padding-top:30vh;
        width:75%;margin:auto;
        box-sizing: border-box;
    }
    
    header h2{
        padding-bottom: 5vw;box-sizing: border-box;
    }
    
    .preamble h3{
        width:100%;margin: auto;
        padding-top: 28vw;
    }
    
    #zen-preamble{
        background-image:url(images/ROADbkgd500.svg);
        background-size:100%;
        padding-bottom:20vw;
    }
    
    #zen-preamble p{
        padding-top:9px;
    }
    
    .explanation h3{
        width:55%;margin: auto;
        padding-top:32vw;
    }
    
    #zen-explanation{
        width:80%;margin:auto;
        background-image: url(images/ABOUTbkgd400.svg);
        background-repeat: no-repeat;
        background-size:100%;
    }
    
    #zen-explanation p{
        width:90%; margin:auto;
        line-height:1.05em;
    }
    
    #zen-explanation p:last-child{
        padding-bottom:25vw;
        box-sizing: border-box;
    }
    
    .participation h3{
        width:80%;margin:auto;
        padding-top:33vw;box-sizing: border-box;
    }
    
    .participation p{
        width:90%;
        margin:auto;
        line-height:1.45em;
    }
    
    #zen-participation{
        background-image: url(images/PARTbkgd400.svg);
        background-repeat:no-repeat;
        background-size:100%;
        margin:auto;
    }
    
    #zen-participation p:last-child{
        padding-bottom:10vw;
        box-sizing:border-box;
    }
    
    .benefits h3{
        width:60%;margin: auto;
        padding-top:32vw;box-sizing: border-box;
    }
    
    #zen-benefits p{
        width:90%;margin:auto;
        padding-bottom:10vw;
        box-sizing: border-box;
    }
    
    #zen-benefits{
        background-image:url(images/BENEFITSbkgd400.svg);
        background-repeat:no-repeat;
        background-size:100%;
        padding-bottom:25vh;
    }
    
    .requirements h3{
        width:80%;margin: auto;
        padding-top:43vw;box-sizing: border-box;
    }
    
    #zen-requirements{
        background-image:url(images/REQbkgd400.svg);
        background-repeat:no-repeat;
        background-size:100%;
        margin-top:-15vh;
    }
    
    #zen-requirements p{
        width:90%;margin:auto;
        margin-bottom: 10vw;
    }
    
    #zen-requirements p:last-child{
        width:30%;
        padding-bottom: 11vw;
    }
    
    .sidebar{
        background-image: url(images/RTbkgd400.svg);
    }
    
    .sidebar h3{
        padding-top:10vw;
    }
    
    #zen-resources ul{
        padding-bottom:10vw;
    }
}