body {    
    width: 100%; 
    margin: 0px;
    padding: 0px;
    background: #fff}

* {box-sizing: border-box;} /* This means the browser will include margin and padding in 'width:' definitions rather than adding those values on. */

/* classes used by scripts when toggling for display/no-display */
.display-none {display: none;} 
.display-on {display: block;}

.pc90 {width: 90%; margin: auto; max-width: 1300px;}
.padding-bottom {padding-bottom: 90px;}

.row {  background: transparent;
        clear: left;
        width: 100%;
        margin: auto;}
		
.max-width {max-width: 1350px;}

.ODM {padding: 40px 40px 40px 30px; max-width: 1000px;} 

.header {
        overflow: visible; height: 70px; background: transparent;
        justify-content: space-between;
        align-items: center; 
        }

.header-image {  /* The div which holds a page's header image*/
        height: 70vh;
		margin-top: -70px;
		position: relative;	
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		}

.featured {	min-height: 65vh;
			margin-top: -70px;
		}
	
					
.footer-squares {width: 25vw; min-width: 300px; padding-bottom: 40px;}



.journal-block {
        display: flex;
        min-height: 300px;
        height: 40vh;
        justify-content: center;
        align-items: center;
        flex: 1;
        padding: 25px;
        }
		
.fullwidthimage {    /* For the feature story on the journal page */
        height: 100vh;
        max-width: 100%; /* This over-rides with row max-width property */
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        } 




/* Now for layouts that sit WITHIN rows */
div.content {width: 90%; margin: auto; margin-top: 30px;}

div.pricing-item {display: inline-block; width: 200px;}
div.pricing-price {display: inline-block;}


/* other styles */

img.content-image {width: 100%; margin: 0px 0px 0px 0px;}
img.recommended {
    height: 100px; 
    padding-right: 7vw;
}
img.logoimg {width: 100px; position: absolute; overflow: visible; margin-left: 5%; top: 23px; cursor: pointer;} 
img.profile-photo {width: 100%;}








/* styles for larger screens */
@media only screen and (min-width: 830px) {
    
.ODM {padding: 40px 40px 40px 15vw;} 

.header {
        overflow: visible; height: 70px; background: transparent;
        justify-content: space-between;
        align-items: center; 
        }
		
.header-image {  /* The div which holds a page's header image*/
        height: 90vh;	
		}	

.featured {    /* The div which holds a page's header image*/
        min-height: 65vh;
		margin-top: -70px;
		}
		
.picture-squares {	/* These are designed to work as 3 flex items grouped together in a flex div. They are also flex containers in their own right to easily position contained text centrally */
					display: flex; 
					justify-content: center;
					align-items: center;
					width: 25vw; height: 25vw; margin: 30px; background: #ccc; 
					font-family: "Tilt Warp";
					font-size: 200%;
					color: #fff; 
					font-weight: bold;
					cursor: pointer;}
					

.journal-block {
        display: flex;
        min-height: 300px;
        height: 40vh;
        justify-content: center;
        align-items: center;
        flex: 1;
        padding: 25px;
        }
		
.fullwidthimage {    /* For the feature story on the journal page */
        height: 100vh;
        max-width: 100%; /* This over-rides with row max-width property */
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        } 


/* Now for layouts that sit WITHIN rows */
div.overimage {padding-top: 20vh; width: 90%; margin: auto;}
div.content {width: 70%; max-width: 1200px; margin-left: 5%; margin-top: 40px;}

img.content-image {width: 90%; margin: 0px 0px 0px 0px;}

img.recommended {
    height: 100px; 
    padding-right: 7vw;
}
img.logoimg {width: 14%; position: absolute; overflow: visible; margin-left: 5%; top: 23px;} 
img.profile-photo {width: 40%;}

   
		
} /* close media query */