@media{
body{
background-color: #208288;
color: #208288;
font-size:18pt;
}
.page-wrapper{
width: 50%;
background-color: white;
margin-top:20rem;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
padding:10px;
border-radius:1000px;
}

a{
color: #208288;
padding-left:2px;
padding-right:2px;
}

a:hover{
text-decoration:none;
background-color: #208288;
color:white;
padding-left:2px;
padding-right:2px;
}

.intro header h1{
display:none;!important
}

.extra1{
position:absolute;
top:20px;
height:275px;
width:85%;
background-image:url("images/zglogo.png");
background-repeat:no-repeat;
background-size:100%;
margin-left:auto;
margin-right:auto;
left: 0;
right: 0;
/* Testing border: solid 2px red;*/
}

.extra2{

width:55%;
height:10rem;
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
background-image:url("images/zgfooter.png");
background-repeat:no-repeat;
background-size:100%;
}


h2{
color: #000000;
margin-bottom:-10px;
text-align:center;
font-family: Helvetica, sans-serif;
font-size: 70pt;
font-weight:100;
width:80%;
float-left:auto;
float-right:auto;
}
.intro header h2{
float-left:auto;
float-right:auto;
margin-left:auto;
margin-right:auto;
}

h3{
color: #000000;
padding-top:30px;
margin-bottom:5px;
text-align:center;
font-family: Helvetica, sans-serif;
font-size: 36pt;
font-weight:300;
}
#design-selection h3{

font-size: 24pt;
}
#design-selection{
text-align:center;
text-decoration:none;
}




#design-archives h3{

font-size: 24pt;
}
#design-archives{
text-align:center;
text-decoration:none;
}



#zen-resources h3{

font-size: 24pt;
}
#zen-resources{
text-align:center;
margin-bottom:25%;
}
a{
text-decoration:none;
}

li{
list-style-type:none;
}

::selection{
color:white;
background:#208288;
}
}
@media only screen and (max-width: 500px) {
.page-wrapper{
width: 90%;
background-color: white;
margin-top:7rem;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
padding:10px;
border-radius:1000px;
}

.extra2{

width:80%;
height:5rem;
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
background-image:url("images/zgfooter.png");
background-repeat:no-repeat;
background-size:100%;
}



h2{
color: #000000;
margin-bottom:-10px;
text-align:center;
font-family: Helvetica, sans-serif;
font-size: 54pt;
font-weight:100;
}
h3{
color: #000000;
padding-top:30px;
margin-bottom:5px;
text-align:center;
font-family: Helvetica, sans-serif;
font-size: 36pt;
font-weight:300;
}
}


@media only screen and (max-width: 400px) {
.page-wrapper{
width: 90%;
background-color: white;
margin-top:7rem;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
padding:10px;
border-radius:1000px;
}

.extra2{

width:80%;
height:5rem;
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
background-image:url("images/zgfooter.png");
background-repeat:no-repeat;
background-size:100%;
}

h3{
color: #000000;
padding-top:30px;
margin-bottom:5px;
text-align:center;
font-family: Helvetica, sans-serif;
font-size: 22pt;
font-weight:300;
}


h2{
color: #000000;
margin-bottom:-10px;
text-align:center;
font-family: Helvetica, sans-serif;
font-size: 40pt;
font-weight:100;
}
}
@media only screen and (max-width: 1200px) and (min-width: 500px) {
.page-wrapper{
width: 85%;
background-color: white;
margin-top:15rem;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
padding:10px;
border-radius:1000px;
}
.extra2{

width:65%;
height:7rem;
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
background-image:url("images/zgfooter.png");
background-repeat:no-repeat;
background-size:100%;
}
h2{
color: #000000;
margin-bottom:-10px;
text-align:center;
font-family: Helvetica, sans-serif;
font-size: 70pt;
font-weight:100;
}
h3{
color: #000000;
padding-top:30px;
margin-bottom:5px;
text-align:center;
font-family: Helvetica, sans-serif;
font-size: 36pt;
font-weight:300;
}
}