body{width:100%; margin:0; padding:0; font-size: 100%; font-family: Georgia, "Times New Roman", serif; color:#333;}

a { color: #036; }

/*MEDIA*/
img, embed, object, video, iframe{max-width:100%; margin:0 0 2em 0;}

/*TYPOGRAPHY*/
h1{font-size:4em; line-height: 1em; margin:1em 0;}
h2{font-size:1.7em; line-height:1.3em; margin:2em 0 1em 0;}
h3{font-size:1.5em; line-height:1.3em; margin:2em 0 1em 0;}
h4{font-size:1.4em; line-height:1.3em; margin:2em 0 1em 0;}
h5{font-size:1.3em; line-height:1.3em; margin:2em 0 1em 0;}
p{font-size: 1.2em; line-height: 1.7em; margin:0 0 2em 0; color:#333;}
ul, ol{font-size: 1.2em; margin:0 0 2em 0;}
li{margin:0 0 0.8em 0; line-height: 1.4em;}
ol{list-style-type: decimal;}
ul{list-style-type: disc;}
blockquote{width:95%;}
blockquote p{font-style: italic;}
table{margin: 0 0 30px 0; max-width: 100%;}
a{text-decoration:none;}
.center{text-align: center;}
.left{text-align: left;}
.italic{font-style: italic;}

/*CONTAINING ELEMENTS*/
.page{width:100%; padding:0;}
header{width:70%; margin:auto; text-align: left;}
header img{margin: auto;}
.intro{width:100%; margin:0 auto; padding:0;}

.main{width:100%; padding:0; margin:0 auto;}

.container{width:70%; margin:0 auto;}

.gallery{float:left; margin:0.5em 1em 0.5em 0;}
.gallery img{margin:0;}
blockquote{float:right; margin:0 0 2em 1em; width:50%; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }

/*TYPOGRAPHY*/
.intro h1{font-family: "Arial Black", arial, sans-serif; font-size: 4em; border-bottom:1px solid #fff; padding-bottom:0.3em; margin-bottom: 0.3em; margin-top:0;}
.intro p{font-style: italic; margin-bottom:0;}

blockquote p {width:90%; margin:0.5em 5%; font-size: 1.6em; font-style: italic; padding:0;}



/*=============TABLETS - PORTRAIT ==========*/
@media only screen and (min-width: 569px) and (max-width: 959px) {
.intro{width:80%;}
.container{width:80%; padding:0;}
.main{width:100%; margin:0 auto;}
.gallery{float:none; margin:0 0 2em 0;}
blockquote{width:100%; margin:0 0 2em 0;}
blockquote p{width:100%; margin:0.5em 0;}
}


/*=============PHONES==========*/
@media only screen and (max-width: 568px) {


/*TYPOGRAPHY*/
p{font-size: 1.15em; line-height: 1.6em; color:#333;}
.container p{width:100%; margin:0 0 2em 0; }
h1{font-size:2.5em !important; line-height: 1em; margin:1em 0;}
header{width:100%;}
header img{width:100%}
.intro{width:90%; margin:2em 5%;}
.main{position:static; width:100%; margin:0; padding:0;}
.container{width:100%; padding:0;}

.gallery{width:100%; margin:0; float:none;}
.gallery img{margin-bottom: 2em;}
blockquote{width:100%; padding:1.5em 0 0 0; margin:0 0 1.5em 0; float:none;}
blockquote p{font-size:1.2em; margin:0 0 0.5em 0; padding:0.5em 0 0 0;}

}