/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
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;
}

abbr {color: #fb9c6c;}

@font-face {
    font-family: 'salomeregular';
    src: url('salome-webfont.eot');
    src: url('salome-webfont.eot?#iefix') format('embedded-opentype'),
         url('salome-webfont.woff2') format('woff2'),
         url('salome-webfont.woff') format('woff'),
         url('salome-webfont.ttf') format('truetype'),
         url('salome-webfont.svg#salomeregular') format('svg');
    font-weight: normal;
    font-style: normal;}

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');

header h1 {text-align: center;
           font-family: 'salomeregular';
            font-size: 40px;
    margin-top: 50px;
        clear: both;}

header h2 {text-align: center;
          font-family: 'Raleway', sans-serif;
        font-weight: 300;
        font-size: 20px;
        margin-top: 10px;}

/*animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;*/

header {background-image: url(images/header.jpg);
        width: 100%;
        height: 100vh;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 0 15vh;
        margin-bottom: 20px;}



.summary {background-image: url(images/lines.png);
    background-repeat: no-repeat;
    background-size: cover;
        width: 100%;
    background-size: 100%;
        height: 13vh;
        font-family: 'Raleway', sans-serif;
        text-align: center;
        padding-top: 40px;
        font-size: 20px;
        line-height: 28px;}

.summary a {color: #fb9c6c;}

.preamble {width: 100%; 
          height: 88vh;}

.preamble h3 {width: 40%;
        height: 73vh;
        background-position: center 1px;
        background-repeat: no-repeat;
        font-family: 'salomeregular';
        font-size: 31px;
        padding-top: 10px;
        margin-top: 29px;
    text-align: center;
    float: left;
    margin-left:170px;
        

background-image: url(images/building1.gif);}

.preamble p {background-image: url(images/box1.png);
width: 336px;
height: 139px;
background-size: 100%;
margin: 10px;
padding-top: 30px;
padding-left: 30px;
padding-right: 10px;
font-family: 'Raleway', sans-serif;
font-size: 15px;
line-height: 25px;
float: right;
clear: right;
margin-right: 250px;}

.preamble abbr {color: black; }

.main supporting {width: 100%;}

.explanation {width: 60%;
margin: auto;
height: 10vh;}

.explanation h3 {font-family: 'salomeregular';
                font-size: 31px;
                text-align: center;
        margin-bottom: 20px;}

.explanation p {text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 20px;
    
    line-height: 25px;
}

.explanation p:nth-child(2) {width:48%; float: left;}

.explanation p:nth-child(3) {width:48%; float: right;}


.participation {clear: right;
margin-top: 30px;}

/**/

.participation {width: 100%; 
          height: 88vh;}

.participation h3 {width: 40%;
        height: 103.5vh;
        background-position: center 1px;
        background-repeat: no-repeat;
        font-family: 'salomeregular';
        font-size: 31px;
       padding-top: 11px;
    text-align: center;
    float: right;
    margin-right: 104px;
        

background-image: url(images/building2.gif);}

.participation p {background-image: url(images/box2.png);
width: 348px;
height: 202px;

margin: 10px;
padding-top: 30px;
padding-left: 20px;
padding-right: 10px;
font-family: 'Raleway', sans-serif;
font-size: 14.7px;
line-height: 25px;
float: left;
clear: left;
margin-left: 250px;}

.participation abbr {color: black; }

.participation a {color: black;}



.benefits {clear:left;
        width: 60%;
margin: auto;
margin-top: 40px;}

.benefits h3 {font-family: 'salomeregular';
                font-size: 31px;
                text-align: center;
        margin-bottom: 10px;}

.benefits p {text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 20px;
    
line-height: 25px;
}


/*    */

.requirements {width: 100%; 
          height: 88vh;}

.requirements h3 {width: 40%;
        height: 175vh;
        background-position: center 1px;
        background-repeat: no-repeat;
        font-family: 'salomeregular';
        font-size: 31px;
        
        margin-top: 8px;
    text-align: center;
    float: left;
    margin-left:170px;
    padding-top: 8px;
        

background-image: url(images/building3.gif);}

.requirements p {background-image: url(images/box3.png);
width: 345px;
height: 192px;
margin: 15px;
padding-top: 20px;
padding-left: 25px;
padding-right: 15px;
background-size: 100%;   
font-family: 'Raleway', sans-serif;
font-size: 11.5px;
line-height: 19px;
float: right;
clear: right;
margin-right: 220px;}

.requirements abbr {color: black; }

.requirements a {color: black;}

footer {width: 80%; clear: left;
height: 100px;
margin: auto;
font-family: 'salomeregular';
                font-size: 31px;
                text-align: center;}
footer a {color: black;
margin: 50px;
padding: 20px;}

footer a:nth-child(1) {background-image: url(images/hover1.png);
    background-size: cover;
                        width: 100%;
                        height: 100%;}

footer a:nth-child(2) {background-image: url(images/hover2.png);
    background-size: cover;
                        width: 150px;
                        height: 150px;}
footer a:nth-child(3) {background-image: url(images/hover3.png);
    background-size: cover;
                        width: 150px;
                        height: 150px;}

footer a:nth-child(4) {background-image: url(images/hover4.png);
    background-size: cover;
                        width: 150px;
                        height: 150px;}

footer a:nth-child(5) {background-image: url(images/hover5.png);
    background-size: cover;
                        width: 150px;
                        height: 150px;}


footer a:hover {background-image: url(images/hover.png);
transition: .5s;}

.sidebar {width: 100%;}


.wrapper {width: 80%; margin: auto;}

.design-selection {width: 156.5vh;
    height: 37vh;
background-image: url(images/container.png);
text-align: center;
}

.design-selection h3 {font-family: 'salomeregular';
        font-size: 31px;
padding-top: 20px;}

.design-selection ul li a {color: black;
font-family: 'Raleway', sans-serif;
line-height: 25px;}

.design-selection {font-family: 'Raleway', sans-serif;}
.design-selection ul li a:nth-child(2) {width:48%; float: right}

.design-selection ul li a: nth-child(3) {width:48%;float:left;}

.design-archives 
{background-image: url(images/container2.png);
width: 38.3vw;
height: 26.4vh;
margin-top: 20px;
float: left;
margin-bottom: 20px;}

.design-archives h3 {font-family: 'salomeregular';
        font-size: 31px;
padding-top: 20px;
padding-left: 20px;
}

.design-archives ul li a {color: black;
font-family: 'Raleway', sans-serif;
    font-size: 20px;
line-height: 45px;
padding-top: 20px;
padding-left: 20px;}

.zen-resources {background-image: url(images/container3.png);
width: 38.3vw;
height: 26.4vh;
margin-top: 20px;
float: right;
margin-right: 27px;}

.zen-resources h3 {font-family: 'salomeregular';
        font-size: 31px;
padding-top: 20px;
padding-left: 20px;}

.zen-resources ul li a {color: black;
font-family: 'Raleway', sans-serif;
    font-size: 20px;
line-height: 25px;
padding-top: 20px;
padding-left: 20px;}

.zen-resources abbr {color: black;}

@media screen and (max-width: 1350px){
    
    header {height: 92vh;}
    
    .summary p {font-size: 15px;}
    
    .preamble { height: 80vh;}
    
    
    .preamble h3 {width: 29%; font-size: 23px;}
    
    .explanation h3 {font-size: 23px;}
    
    .explanation p {font-size: 16px;}
    
    .participation {height: 80vh;}
    
    .participation h3 {font-size: 23px; width: 43%}
    
    .benefits h3 {font-size: 23px;}
    
    .benefits p {font-size: 16px;}
    
    .requirements {height: 80vh;}
    
    .requirements h3 {font-size: 23px;}
       
}



@media screen and (max-width: 1316px){
    
    
    header {height: 89vh}
    .summary {font-size: 18px; height: 10vh; }
    
    .preamble {height: 81vh;}
    
    .preamble h3 {width: 30%; 
    background-size: 100%;font-size: 27.5px; }
    
    
    
    .explanation h3 {font-size: 27.5px;}
    
    .explanation p {height: 32vh; font-size: 18px;}
    
    .participation h3 {font-size: 27.5px; width: 50%; margin: 0; background-size: 64%}
    
    .participation p {width: 49vh;}
    
    .benefits h3 {font-size: 27.5px;}
    
    .benefits p {font-size: 18px;}
    
    .requirements h3 {width: 30%; background-size: 100%; font-size: 27.5px;}
    
    .requirements p {width: 49vh;}
    
    footer {width: 100%;}
    
    .design-selection {width: 100%;}
    
    .design-selection h3 {font-size: 27.5px;}
    
    .design-selection ul li a, p {font-size: 16px;}
    
    .design-archives {width: 49%;}
    
    .zen-resources {width: 46%;}   
    
}




   @media screen and (max-width: 1286px){
       
       .explanation p, .participation p, .summary p, .requirements p, .preamble p, .benefits p, footer{width:100%; height: 100%; padding: 0; margin: 0; float: none; display: block;} 
       
        .explanation h3, .participation h3, .summary h3, .requirements h3, .preamble h3, .benefits h3, footer {width:100%; height: 100%; padding: 0; margin: 0; float:none; display: block;}
       
       header, .summary, .preamble h3, .participation h3, .requirements h3 {background-image: none;}
       
       header {height: 5vh;}
       
       .summary {height: 11vh;}
       
       .preamble {margin-top: 60px; height: 30vh;}
       
       .preamble h3 {font-size: 25px;
        height: 5vh;}
       
       .preamble p {width: 48vh;
       height: 19.5vh;
       margin: auto;
       padding: 15px;}
       
       
       .explanation {padding-top: 360px; width: 90%;}
       
       .explanation h3 {font-size: 25px;}
       
       .explanation p {font-size: 18px;}
       
       
       .participation {padding-top: 220px; height: 30vh;}
       
       .participation h3 {height: 8vh; font-size: 25px;}
       
       .participation p {width: 49vh; height: 27.5vh; margin: auto; padding: 15px;}
       
       .benefits {padding-top: 510px; width: 90%;}
       
       .benefits h3 {font-size: 25px;}
       
       .benefits p {margin-top: 10px; font-size: 18px;}
       
       .requirements {margin-top: 20px; height: 145vh; }
       
       .requirements h3 {font-size: 25px; height: 5vh;}
       
       .requirements p {width: 48vh; height: 21.5vh; margin: auto; padding: 20px;}
       
       footer {width: 100%; height: 10vh; }
       
       footer a {margin: 0; padding-top: 20px; font-size: 20px;}
       
       .wrapper {width: 90%;}
       
       .design-selection {width: 100%;}
       
       .design-selection h3 {font-size: 25px;}
       
       .design-selection ul li a {font-size: 15px;}
    
       .design-archives {width: 50%;}
       
       .design-archives h3 {font-size: 25px;}
       
       .design-archives ul li a {font-size: 18px;}
    
       
        .zen-resources {width: 38%; margin-left: 40px;}
       
       .zen-resources h3 {font-size: 25px;}
       
       .zen-resources ul li a {font-size: 18px;}
      
}

       
footer a { font-size: 20px;}


@media screen and (max-width: 700px){
    
    .explanation p {font-size: 14px;}
    
    

@media screen and (max-width: 623px){
       
       .summary {font-size: 16px;}
    
       .preamble p {font-size: 14px;}
    
       .explanation p {font-size: 15px;}
    
       .participation {padding-top: 390px; height: 30vh;}
    
    .participation p {font-size: 14px; padding-left: 19px;}
    
    .benefits p {font-size: 14px;}
    
    .requirements p {font-size: 11.7px;}
    
    footer a {font-size: 14px;}
    
    .design-selection {width:100%; font-size: 12.5px;}
    
    .design-selection ul li a {font-size: 12.5px;}
    
    .design-archives {width: 100%; text-align: center;}
    
    .design-archives h3 {font-size: 25px;}
    
    .design-archives ul li a {font-size: 20px;}
    
    .zen-resources {width: 100%; margin: 0; text-align: center;}
    
    .zen-resources {margin-bottom: 20px;}
   
    
    
    
}