/* 
  -----------------------------------
  PVII Affinity
  Copyright (c) 2014 Project Seven Development
  www.projectseven.com
  Aspire Theme
  -----------------------------------
*/

body {
	font-family: Buda, "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 115%;
	margin: 0px;
	background-image: url(img/aspire-logo.png);
	background-repeat: no-repeat;
}
.p7DMM {
	font-family: Buda, "Palatino Linotype", "Book Antiqua", Palatino, serif;
	padding-left: 24px;
}
.p7DMM.dmm-vertical {
	padding-left: 0px;
}
.p7DMM div {
	border-radius: 4px;
	padding: 0px !important;
}
.main-row {
	zoom: 1;
	background-color: rgba(255,255,255,.2);
}
.main-row:before, .main-row:after {
	content: ".";
	display: block;
	height: 0;
	overflow: hidden;
}
.main-row:after { clear: both; }
.column {
	float: left;
}
.content {
	padding: 20px;
	transition: padding linear .5s .1s; 
}
.aspire-5 .content {
	padding: 20px 40px;
}

/*Column Width Options.*/
.percent20 { width: 20%; }
.percent25 { width: 25%; }
.percent30 { width: 30%; }
.percent333 { width: 33.333%; }
.percent40 { width: 40%; }
.percent50 { width: 50%; }
.percent60 { width: 60%; }
.percent75 { width: 75%; }

/*Width recalculations for columns when they are boxed. 
Since boxed columns have a space between them assigned via right margin, 
we need to reduce the width of each column accordingly*/
.percent20.boxed { width: 18.4%; }
.percent25.boxed { width: 23.5%; }
.percent333.boxed { width: 32%; }
.percent40.boxed { width: 38%; }
.percent50.boxed { width: 49%; }
.percent60.boxed { width: 59%; }
.percent75.boxed { width: 74%; }

/*Using margin to separate the columns when the boxed option is chosen*/
.column.boxed.spacer { margin-left: 2%; }
.left-20 {
	position: relative;
	left: 20%;
}
.left-neg-60 {
	position: relative;
	left: -60%;
}

/*Assigning logical borders to render dividers between columns*/
.border-left-right-bottom {
	border: 1px solid;
	border-top: none;
	border-radius: 0px 0px 5px 5px;
}
.border-boxed {
	border: 1px solid;
	border-radius: 5px;
}

.aspire-4 .border-left-right-bottom {
	border: 1px solid;
	border-radius: 5px;
}

#masthead {
	font-size: 1.5em;
	padding: 0px 20px;
}

h1, h2, h3, h4 { margin: 0px; }
span.dropcap {
	font-family: Combo, "Palatino Linotype", "Book Antiqua", Palatino, serif;
	float: left;
	font-size: 8em;
	margin: 0 10px 0 0;
	padding: 0 .1em 0 0;
	display: block;
	line-height: 0.775em;
	border-right: 1px solid;
	font-stretch: ultra-condensed;
}
.emfatico {
	font-size: 20px;
	line-height: 1.75;
	background-color: #222;
	background: rgba(0,0,0,.85);
	color: #FFF;
	border-radius: 5px;
	margin: 10px 0px;
}
.emfatico, .content.emfatico {
	padding: 5% 5%;
}
.red {
	background-color: #CE4242;
	background: rgba(204,51,51,.85);
	color: #000;
}
.white {
	background-color: #FFF;
	background: rgba(255,255,255,.5);
	color: #000;
}
.brm .main-row {
	background: linear-gradient(180deg, rgba(255,255,255,.75) 70%, rgba(255,255,255,0));
}
.aspire-4.brm .main-row {
	background: none;
}
.aspire-4.brm .column .content {
	background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
}
#copyright {
	margin: 0px;
	color: #000000;
}
#copyright span { display: block; }
#footer {
	padding: 0;
	font-size: 0.75em;
}

#footer .content {
	padding: 12px 20px;
	border: none;
}
.aspire-2 #footer,
.aspire-3 #footer {
	width: 60%;
	margin: auto;
}

.aspire-5 .p7DMM,
.aspire-5 #masthead,
.aspire-5 #footer .content {
	padding-left: 40px;
}

.main-row.aspire-4 {
	padding: 10px 24px;
}

img.scalable {
	width: auto;
	height: auto;
	max-width: 100%;
}
.rounded { border-radius: 5px; }
.centered { text-align: center; }
.opaque { opacity: .65; }

.emfatico a { color: #AAA;}
.emfatico a:hover { color: #FFF;}
.emfatico.red a { color: #FFF;}
.emfatico.red a:hover { color: #000;}
a, .emfatico.white a { color: #39F; }
a:hover, .emfatico.white a:hover { color: #000; }

/*SMARTPHONE AND NARROW WINDOWS (LESS THAN 700PX WIDE)*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
.column {
	float: none !important;
	width: auto !important;
	position: static;
}
.spacer { margin: 20px 0px !important; }
.emfatico { border-radius: 5px !important; }
.content {
	padding: .5em 1.5em;
	border: none !important;
	height: auto !important;
	max-height: 888678px;
}
.main-row.aspire-4 {
	padding: 0px;
}
.aspire-5 .p7DMM {
	padding-left: 0px;
}
.aspire-2 #footer,
.aspire-3 #footer {
	width: auto;
}
.border-left-right-bottom {border: none;}
}
 @media only screen and (min-width: 701px) and (max-width: 1024px) {
.column { position: static; }
.column.sec-2.percent20 { width: 40% !important; }
.aspire-3 .column.sec-1,  .aspire-4 .column.sec-2 { width: 38% !important; }
.aspire-3 .column.sec-2,  .aspire-4 .column.sec-1 { width: 59% !important; }
.aspire-3 .column.sec-2 .content {
	border-right: none;
	border-bottom: none;
	border-radius: 0px;
}
.aspire-2 .main-row {padding-left: 6px;}

.column.sec-3.percent20 {
	width: auto !important;
	float: none !important;
}
.column.sec-3 .content {
	border: none !important;
	height: auto !important;
	max-height: 888678px;
}
.aspire-2 #footer,
.aspire-3 #footer {
	width: auto;
}
}
/*Smartphones ONLY*/
@media only screen and (max-device-width: 480px) {
}

/*Portrait Tablet ONLY. Use this query to add rules for tablets in Prtrait orientation.
Landscape tablets should get a normal and unaltered display.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}