/*
 ----------------------------- 
 PVII Typecrafters
 by Project Seven Development
 www.projectseven.com
 -----------------------------
*/

* {
	box-sizing: border-box;
}
html,
body {
	display: flex;
	flex-direction: column;
	font-size: 110%;
	
	
}
/*
********************************************************
       BACKGROUND IMAGE FOR SMALL PHONES
	   Turn off fixed and make smaller
********************************************************
*/
@media only screen and (min-width: 0px) and (max-width: 768px) {
	body {background-attachment: scroll; background-size: 50%;}
}

p strong {
	font-size: 100%;
}
code {
	font-family: "Courier New", Courier, monospace;
}
h1, h2, h3, h4, .dropcap{
	
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}



.hmy-content-wrapper.logo .hmy-content {
	padding: 20px 0px 0px 0px;
	font-size: 200%;
}
.hmy-content-wrapper.nav .hmy-content,
.hmy-content-wrapper.extra .hmy-content {
	padding: 0px 0px;
	font-size: 80%;
}
.hmy-content-wrapper.tagline .hmy-content {
	padding: 30px 10px 0px 0px;
}
span.dropcap {
	float: left;
	font-size: 2.5em;
	margin-right: 2px;
	padding: 0 0 0 0;
	display: block;
	line-height: 0.5em;
	color: rgb(0,0,0);
	
}

span.dropcap-gap {
	float: left;
	font-size: 2.5em;
	margin-right: 6px;
	padding: 0 0 0 0;
	display: block;
	line-height: 0.5em;
	color: rgb(0,0,0);
	
}



.content {
	flex: 1 0 auto;
	padding: 0px 0px;
	
}
.footer {
	flex-shrink: 0;
	margin: 0px 0px 0px 0px;
	
}



a.link-unbordered {border: none !important;}




h1 {
	margin: 10px;
}
.blurb-black {
	padding: 20px;
	background-color: #181818;
	color: #F00;
	border-radius: 5px;
}
.capitalize {
	text-transform: uppercase;
}
.underline {
	text-decoration:underline;
}
.italic {
font-style: italic;
}

.no-border {
	border: 0px  !important;
}

.box-shadow {
  box-shadow: 5px 10px #888888;
}

.top-margin-36 {margin-top: 36px;}
.top-margin-20 {margin-top: 20px;}
.top-margin-12 {margin-top: 12px;}
.top-padding-10 {padding-top: 10px;}
.top-padding-20 {padding-top: 20px;}
.top-padding-30 {padding-top: 30px;}
.bottom-padding-30 {padding-bottom: 30px;}
.right-padding-headline {padding-right: 5%;}

.black{
	color: #000;
}

.white{
	color: #FFF;
}

.bold {
	font-weight: bold;
}

.big {
	font-size: 120%;
}

.small {
	font-size: 80%;
	padding-top: 12px;
	}
	
.small-center {
	font-size: 80%;
	text-align:center;
	padding-top: 12px;
	}
	
.big-plus {
	font-size: 140%;
}

.big-arrow {
	font-size: 300%;
}

.bleed {
	opacity: .65;
}
.google-ads {  
	 margin-left: auto;
    margin-right: auto;
	width: auto;
	text-align:center;	
	background-color:rgb(255,255,255);
	
	
}
.google-ads-header {  
	
	margin-left: auto;
    margin-right: auto;
	width: auto;
	text-align:center;	
	background-color:rgb(255,255,255);
	
}
.google-ads-footer {  
	
	margin-left: auto;
    margin-right: auto;
	width: auto;
	text-align:center;	
	background-color:rrgb(255,255,255);
	
}


/*
*************************************************************************
  RESET HARMONY LINK STYLES TO COMPLETE THE REASSIGNMENT
  COPY LINK RULES BELOW TO HARMONY CSS FILE, REPLACING THE DEFAULTS
  This will auto style all links in paragraphs. For text links outside
  paragraphs, assign the text-link class directly to the link's
  <a> tag: <a class="text-link"...>
*************************************************************************
*/
.p7HMY .hmy-section p a {border-bottom: 1px dotted;
	transition: all linear .5s;
	color: rgb(0,0,0);
	text-decoration: none;
	font-weight: normal;}
.p7HMY .hmy-section p a:hover {border-bottom: 1px solid rgb(0,0,0);
 font-weight: normal;}
.p7HMY .hmy-section a.text-link {border-bottom: 1px dotted;
	transition: all linear .5s;
	color: rgb(0,0,0);
	text-decoration: none;
	font-weight: normal;}
.p7HMY .hmy-section a.text-link:hover {border-bottom: 1px solid rgb(0,0,0);;font-weight: normal;}


/*
************************************************************
 SET A HARMONY COLUMN TO STICKY ASSIGN CLASS "STICKY" AS A 
           SECTION USER CLASS IN HARMNONY UI
************************************************************
*/
.sticky .hmy-content {
	position: -webkit-sticky;
	position: sticky;
	top: 140px;

}
/* Turn off Sticky for small screens */
@media only screen and (min-width: 0px) and (max-width: 768px) {
	.sticky .hmy-content {position: static;}
}

/*
****************************************************************
  You can add the user class "top-bottom-padding-48" in the
  Harmony UI to a column that you want to have more "height"
  We use it on the first column of the Calendar of Events.
****************************************************************
*/
.hmy-content-wrapper.bam-bg.top-bottom-padding-48 .hmy-content {padding: 48px 24px;}

/*
************************************
  A Special Rule to Set off some
  Text in small, spaced font.
************************************
*/
.note,
.note.red,
.note.blue {
	font-size: 65%;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-weight: bold;
}
.note {
	color: #FFF;
}
.note.red {
	color: #F33;
}
.note.blue {
	color: #6699CC;
}
.note.black {
	color: #000;
}


/*
****************************************************************
      UTILITY CLASS TO ASSIGN TO IMAGES MAKING THEM
	  ROUNDED, WITH A BORDER, AND SEMI-TRANSPARENT
****************************************************************
*/
img.rounded-transparent {
	border-radius: 5px;
	opacity: .77;
	border: 1px solid;
	transition: all linear .5s;
}
img.rounded-transparent:hover {
	opacity: 1;
}
img.rounded-transparent-zoom {
	border-radius: 5px;
	opacity: .77;
	transform: scale(1);
	border: 1px solid;
	transition: all linear 5s;
}
img.rounded-transparent-zoom:hover {
	opacity: 1;
	transform: scale(1.5);
}

/*
*************************************************************
                      SOCIAL ICONS
*************************************************************
*/
.social-icons img {
	filter: grayscale(1);
	opacity: .5;
	transition: all linear .5s;
	max-width: 32px;
}
.social-icons img:hover {
	filter: grayscale(0);
	opacity: 1;
}
ul.social-icons {
	margin: 10px 0px 0px 0px;
	padding: 0px;
}
.social-icons li {
	list-style-type: none;
	display: inline-block;
}
.hmy-content-wrapper.social .hmy-content {
	padding: 10px 25px;
}



/*Advertisments*/
	

	
.ads {
	margin: 0px;
    margin-left: auto ;
    margin-right: auto ;
	width: 100%;
	text-align:center;
	}	

/*
****************************************************************
   "grail-layout" is a user class assigned to the main
   layout grid in layout 1. "order-0" to "order-3" are
   user classes assigned to the Harmony sections in that
   grid to express the default order of the columns. 
   We use a media query to rearrange the display order
   of the columns for small screens so that the main content
   column comes first.
****************************************************************
*/
@media only screen and (min-width: 0px) and (max-width: 768px) {
.grail-layout .order-0 {order: 1;}
.grail-layout .order-1 {order: 3;}
.grail-layout .order-2 {order: 2;}
.grail-layout .order-3 {order: 4;}
}
/*Utility Rules for Grail Layout*/
.grail-layout .hmy-content-wrapper.main-content .hmy-content {
	padding-top: 28px;
}
/*
****************************************************************
   "sidebar-left" is a user class assigned to the main
   layout grid in layout 4. "order-0" to "order-2" are
   user classes assigned to the Harmony sections in that
   grid to express the default order of the columns. 
   We use a media query to rearrange the display order
   of the columns for small screens so that the main content
   column comes first.
****************************************************************
*/
@media only screen and (min-width: 0px) and (max-width: 768px) {
.sidebar-left .order-0 {order: 1;}
.sidebar-left .order-1 {order: 3;}
.sidebar-left .order-2 {order: 2;}
}

/*
*****************************************************************
    .calendar-grid .sidebar-right mixed-bag single-column
	                 -------------
	Layout 2, Layout 5, Layout 6, an Layout 7 each have 
	relevant user classes assignd to their content grids.
	You can use these class names to create special rules
	that will affect only specific layouts.
*****************************************************************
*/





@media only screen and (min-width: 0px) and (max-width: 768px) {
	.p7dmm-fixed:before {display: none;}
	.hmy-content-wrapper .hmy-content.hmy-right {text-align: left;}
	 body {font-size: 95%;}
	.p7HMY .hmy-section {flex-basis: 100% !important;}
	.p7HMY .hmy-section .hmy-content-wrapper {border-radius: 0px !important; border: none !important;}
	.p7HMY.hmy-legacy .hmy-section {float: none !important; width: 100% !important;}
}