@font-face{
	font-family:saucyfont;
  src: url('fonts/vagrounded-thin.woff2') format('woff2'),
       url('fonts/vagrounded-thin.woff') format('woff'),
       url('fonts/vagRounded-thin.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

html{
background-image:url('images/bgtiler.gif');
}

body{
    margin: 0 auto;
    width: 100%;
    color: #333;
    font-size: 16px;
    font-family: saucyfont, Arial, Helvetica, sans-serif;
    text-align: left;
    max-width: 1300px;
    padding: 10px;
    box-sizing: border-box;
}

a{
text-decoration:none;
color: #f238b7;
border:0;
}

a:hover{
color:#666;
}

nav{
margin: 10px;
font-size:120%;
color: #666;
}

.mainHeader {
/*background-image:url('images/bgtilerpink.png');*/
background-color:#f661c6;
clear:both;
}

.mainHeader img{
width:33%;
height:auto;
margin:2% 0 2% 3%;

}

div.content{
/*width:32%;
float:left;
padding:0.5%;*/
margin:0 0 25px;
overflow: hidden;
}

.content img{
width:100%;
height:auto;
clear:both;
}

.content h2{
font-size:105%;
margin-top:5px;
margin-left:2px;
margin-bottom:0;
padding-bottom:0;
}

.content footer p{
font-size:90%;
margin-top:8px;
margin-left:2px;
}

.contentWide{
width:60%;
float:left;
margin:1%;
}

.contentWide img{
width:100%;
height:auto;
clear:both;
}

.contentWide h2{
font-size:105%;
margin-top:5px;
margin-left:2px;
margin-bottom:0;
padding-bottom:0;
}

.contentWide footer p{
font-size:90%;
margin-top:8px;
margin-left:2px;
}


.projectImages{
width:66%;
margin:1%;
float:left;
}

.projectImages img{
width:100%;
height:auto;
}

article.mainText{
width:30%;
float:left;
margin:0%;
} 
article.mainText.with-map {
  width:40%;
}

article.mainText h1{
font-size:120%;
margin-top:0;
color: #f238b7;
} 

article.mainText p{
font-size:90%;
margin-top:0;
font-family:Helvetica, Arial, sans-serif;
} 


article footer {
font-size:90%;
font-family:Helvetica, Arial, sans-serif;
} 

article.mainTextAbout{
width:60%;
float:left;
margin:1% 4% 1% 3%;
} 
article.mainTextAbout.with-map {
  width: 58%;
  margin: 1% 2% 1% 0%;
}

article.mainTextAbout h1{
font-size:120%;
margin-top:0;
color: #f238b7;
}

article.mainTextAbout p{
font-size:90%;
margin-top:0;
font-family:Helvetica, Arial, sans-serif;
} 


.mainFooter{
clear:both;
border-top:thin dotted;
/*font-family: Arial, Helvetica, sans-serif;*/
font-size:90%;
}

.js-video {
height: 0;
padding-top: 25px;
padding-bottom: 67.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.js-video.widescreen {
padding-bottom: 56.34%;
}
.js-video.vimeo {
padding-top: 0;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}

.cards {
  column-count: 3;
  column-gap: 25px;
}
@media only screen and (max-width: 800px) {
  .cards {
    column-count: 2;
  }
}
@media only screen and (max-width: 480px) {
  .cards {
    column-count: 1;
  }
}

@media only screen and (min-width: 150px) and (max-width: 640px)
{

/*body{

width:95%;
font-size:95%;
}*/

.mainHeader{
padding:4% 0 

}

.mainHeader img{
width:95%;
height:auto;
margin:2% 0 2% 3%;

}

nav{
font-size:120%;
width:100%;
margin:1% 0 4% 0;
/*height:120px;*/
}

nav a{
color:#fff;
font-size:100%;
padding:10px 0;
display:block;
border:thin solid #c4c4c4;
text-align: center;
margin-bottom:5px;
background-color:#c4c4c4;
}

nav a:hover{
background-color: #fff;
color:#f238b7;
border:thin solid #c4c4c4;
}


.hide{
 /*visibility: hidden;*/
 display:none;
 margin:0;
 padding:0;
 height:0;
}


.content{
width:98%;
margin-bottom:10px;
}

.content h2{
margin:0 0 0 2%;
font-size:130%;
}

.content footer p{
font-size:100%;
margin-top:5px;
}

.contentWide{
width:98%;
}


.contentWide h2{
font-size:130%;
}

.contentWide footer p{
font-size:100%;
margin-top:10px;
}

.projectImages{
width:100%;
margin:1%;
float:left;
}

.projectImages img{
width:98%;
height:auto;
}

article.mainText,
article.mainText.with-map{
margin:5% 0 3% 2%;
width:95%;
} 

article.mainText h1{
} 

article.mainText p{
font-size:100%;
margin-top:0;
font-family:Helvetica, Arial, sans-serif;
} 

article.mainTextAbout,
article.mainTextAbout.with-map{
width:95%;
margin:1%;
} 

article.mainTextAbout p{
font-size:100%;
} 


article footer {
font-size:90%;
} 


.postInfo{
margin: 2% 0 6% 2%;
}


}