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

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

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

/*CONTAINING ELEMENTS*/

.container{width:90%; max-width:850px; background:#fff; padding:2em 5%; margin-left: auto; margin-right: auto;}


/*photo style page*/
.photo header{ display: block; width:100%;}
.photo header img{ display: block; width: 100%;}
.photo .intro{background:rgba(0,0,0,0.5); width:100%; max-width: 900px; margin: 0 auto 10em auto; padding:2em 0;}
.photo .intro *{width:90%; max-width: 850px; margin-left:auto; margin-right:auto; text-align: left; color:#fff;}

.photo .main{width:70%; max-width:900px; padding:0; margin:0 15%; position:absolute; top:10em; text-align: left;}

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

/*TYPOGRAPHY*/
.photo .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;}
.photo .intro p{font-style: italic; margin-bottom:0;}

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


/*cover page*/
.cover{background-image:url(../i/bolt.jpeg); background-position: top center; background-size:100%; padding:0;}
.cover header{text-align: center; width:100%; padding:0;}
.cover .intro{background:rgba(0,0,0,0.5); width:60%; max-width: 800px; margin: 0 auto 0 auto; padding:1em 0;}
.cover .intro *{width:90%; max-width: 750px; margin-left:auto; margin-right:auto; text-align: left; color:#fff;}

.cover .lead{border-top:1px solid #fff; border-bottom:1px solid #fff; margin-bottom:1em; padding:1em 0;}

.cover .main{background:rgba(0,0,0,0.5); width:60%; max-width: 850px; padding:2em 0; margin:10em auto 0 auto; text-align: left; color:#fff; }

.cover ul{list-style-type: none; margin:0; width:100%;}
.cover ul li{border-bottom:1px solid #fff; padding:0.1em 0; display: inline-block; width:30%; margin-right:2.5%;}
.cover ul li a{color:#fff; display:block;}

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

.cover .lead h3{margin:0; font-size: 4em;}
.cover .lead p{margin:0;}


.cover .main p{color:#fff;}


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


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

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

.photo .gallery{max-width:95%; margin:0 2.5% 2em 2.5%; float:none;}
.photo blockquote{width:95%; margin:0 2.5% 2em 2.5%; float:none;}
.photo blockquote p{margin-bottom: 0; font-size: 1.5em;}

.cover ul li{width:45%; margin-right:2.5%;}
}