@charset "UTF-8";
/* CSS Document */

/*
	Theme Name: WP Advocate Child
	Theme URI:    https://chapelvestments.com/wp-advocate-child/
	Description:  My first child theme, based on WP Advocate
	Author: Andy
	Author URI: https://chapelvestments.com
	Version: 2.0
	Template: wp-advocate
	Template Version: 2.0
 
*/

/******************************************************************/
@import '//fonts.googleapis.com/css?family=IM+Fell+DW+Pica';
/******************************************************************
/*
Add Your Custom CSS Below This Line
---------------------------------------------------------------- */

/* type & header styles */
p, body {
	background-attachment: fixed;
	background-size: cover;
	font-size: 18px; /* for ie8 & below */ 
	font-size: 1.8rem; 
	line-height: 1.8; 
	font-family: 'IM Fell DW Pica', serif;
}

h1, .h1 {
    font-size: 35px;
    font-size: 4.2rem;
    line-height: 32px;
    line-height: 4.2rem;}

h2.cope {font-style: italic; font-size: 2.0rem; margin-top: 0px; text-align: center}

.biggertext {font-size: 20px;}

.post-content img {min-width: 300px !important}
.purple {width: 35%; max-width:400px}
.photodiv1 {width: 70%; float: left; font-size: 17px; text-align: center; margin: 0 15% 0 15%;}	
.photodiv2 {width: 40%; float: left; font-size: 17px; text-align: center; margin: 0 30% 0 30%;}
.photodiv3 {width: 48%; float: left; font-size: 17px; text-align: center; margin: 0 26% 0 26%;}
#div2 {width: 100%; float: left; font-size: 17px; text-align: center; margin: 0 0 15px 0;}
#div2a {width: 44%; float: left; margin: 20px 2% 10px 4%; text-align: center;}
#div2b {width: 44%; float: right; margin: 20px 4% 10px 2%; text-align: center;}
.two_photos {width: 100%; float: left; font-size: 17px; text-align: center; margin: 0 0 15px 0;}
.photo1 {width: 44%; float: left; text-align: center; max-width: 520px; margin: 20px 2% 10px 4%;}
.photo2 {width: 44%; float: right; text-align: center; max-width: 520px; margin: 20px 4% 10px 2%;}
.photo1sm {width: 40%; float: left; text-align: center; max-width: 520px; margin: 20px 2% 10px 8%;}
.photo2sm {width: 40%; float: right; text-align: center; max-width: 520px; margin: 20px 8% 10px 2%;}
#div3 {width: 60%; float: left; font-size: 17px; text-align: center; margin: 0 20% 0 20%;}
 
@media only screen and (max-width:800px) {
.photodiv2 {width: 60%; float: left; margin: 0 20% 15px 20%;}
#div2 {width: 60%; float: left; margin: 0 20% 15px 20%;}
#div2a {width: 100%; float: left; margin: 15px 0 15px 0;}
#div2b {width: 100%; float: left; margin: 15px 0 15px 0;}
.two_photos {width: 80%; float: left; margin: 0 10% 15px 10%;}
.photo1 {width: 100%; float: left; margin: 15px 0 15px 0;}
.photo2 {width: 100%; float: left; margin: 15px 0 15px 0;}
.photo1sm {width: 90%; float: left; margin: 2px 5% 2px 5%;}
.photo2sm {width: 90%; float: left; margin: 2px 5% 2px 5%;}
#div3 {width: 80%; float: left; margin: 0 10% 15px 10%;}
}
@media only screen and (max-width:640px) {
.photodiv1, .photodiv2, .photodiv3 {width: 80%; float: left; margin: 0 10% 0 10%;}	
}
@media only screen and (max-width:475px) {
.smallphoto {min-width: 200px !important;}
.photodiv1, .photodiv2, .photodiv3 {width: 100%; float: left; margin: 0 0;}
#div2 {width: 100%; float: left; margin: 0 0 15px 0;}
#div2a {width: 100%; float: left; margin: 20px 0 10px 0;}
#div2b {width: 100%; float: left; margin: 20px 0 10px 0;}
.two_photos {width: 100%; float: left; margin: 0 0 15px 0;}
.photo1, .photo1sm {width: 100%; min-width: 200px; float: left; margin: 2px 0 2px 0;}
.photo2, .photo2sm {width: 100%; min-width: 200px; float: left; margin: 2px 0 2px 0;}
#div3 {width: 100%; float: left; margin: 0 0;}
}