/* ---------------------------------- 
 Non templated CSS
------------------------------------- */

/* Here, you can put:
	- mobile specific styles - override these for desktop in the desktop/tablet media query below
	- styles that can be used for both mobile AND desktop */

#tile-1 .text { padding: 0 30px; padding: 0 3rem; }
#tile-1 .pie .circles-text,
#tile-1 .text span { color: #ff7700; }

#tile-2 .pie .circles-text, 
#tile-2 .text span { color: #8a133b; }
#tile-2 .pie .circles-text { /* include units both as px and rem to keep consistent with sass */ font-size: 48px; font-size: 4.8rem; }

#tile-3 h4 { font-weight: bold; }
#tile-3 .graphic { /* include units both as px and rem to keep consistent with sass */ margin: 0 0 10px 0; margin: 0 0 1rem 0; }
#tile-3 .pie .circles-text { color: #f00; }
#tile-3 .pie#circle-4 .circles-text { /* include units both as px and rem to keep consistent with sass */ font-size: 34px; font-size: 3.4rem; }
#tile-3 .pie#circle-5 .circles-text { font-size: 20px; font-size: 2rem; }

#tile-6 .graphic #callout-1 { position: absolute; left: 0; }
#tile-6 .graphic #callout-2 { position: absolute; right: 0; top: -30px; }
#tile-6 .text span,
#tile-6 .text cite { color: #f00; }

#tile-7 .text a { color: #fff; }

/* = Small tile grid */
#grid #small-tile-1 .tile-inner { background-image: url(../images/grid/grid_1.png); }
#grid #small-tile-2 .tile-inner { background-image: url(../images/grid/grid_2.png); }
#grid #small-tile-3 .tile-inner { background-image: url(../images/grid/grid_3.png); background-position: 30px 24px; }
#grid #small-tile-4 .tile-inner { background-image: url(../images/grid/grid_4.png); background-position: 40px 14px; }
#grid #small-tile-5 .tile-inner { background-image: url(../images/grid/grid_5.png); background-size: 45% auto; background-position: 100% 15px; }
#grid #small-tile-6 .tile-inner { background-image: url(../images/grid/grid_6.png); background-position: 0 20px; }

/* Any styles for screens 480px and higher go here */
@media (min-width: 480px) {
	#tile-3 .column.one .graphic { padding: 43px 0 10px; }
}

/* Tablet/desktop styles go here */
@media (min-width: 801px) {
	#tile-2 .row:nth-child(2) .graphic { margin: 0; }
	
	#tile-3 h3 { margin: 0 0 10px 0; margin: 0 0 1rem 0;}
	#tile-3.tile-inner.two-col .tile-padding { padding-left: 52px; padding-right: 52px; padding-left: 5.2rem; padding-right: 5.2rem; }
	#tile-3 h4 { margin: 0 0 10px 0; margin: 0 0 1rem 0; }
	#tile-3 .column.one .graphic { padding: 0 0 30px; }
	#tile-3 .column .graphic img { height: 130px; }
	#tile-3 .text p { font-size: 15px; font-size: 1.5rem; line-height: 21px; line-height: 2.1rem; }
	
	#tile-4 .row { padding: 20px 0 0 0; padding: 2rem 0 0 0; }
	#tile-4 .row-wrap .row:last-child .text { padding-top: 10%; }

	#tile-5 .row-wrap .row .text { width: 80% !important; }
	#tile-5 .row-wrap .row .graphic { width: 20% !important; }
	#tile-5 .row .text p { font-size: 16px; font-size: 1.6rem; line-height: 23px; line-height: 2.3rem; }
	
	#tile-6 .graphic { /* include units both as px and rem to keep consistent with sass */ margin: 0 0 30px 0; margin: 0 0 1.5rem 0;}
	#tile-6 .graphic #callout-1 { position: absolute; left: 10%; }
	#tile-6 .graphic #callout-2 { position: absolute; right: 10%; top: -30px; }
	#tile-6 .text cite { font-weight: bold; }
}

/* Tablet/desktop - screens larger than 1024px */
@media (min-width: 1024px) {
	#tile-1 .text { padding: 0 30px; padding: 0 3rem; }
	
	#tile-3 h3 { margin: 0 0 20px 0; margin: 0 0 2rem 0;}
	#tile-3.tile-inner.two-col .tile-padding { padding: 36px 52px; padding: 3.6rem 5.2rem; }
	#tile-3 .column .graphic img {height: auto; }
	#tile-3 .column.one .graphic { padding: 43px 0 30px; }
	#tile-3 .text p { font-size: 16px; font-size: 1.6rem; line-height: 23px; line-height: 2.3rem; }
	
	#tile-5 .row-wrap .row .text { width: 65% !important; }
	#tile-5 .row-wrap .row .graphic { width: 35% !important; }
	#tile-5 .row .text p { font-size: 19px; font-size: 1.9rem; line-height: 28px; line-height: 2.8rem;}
}

@media (min-width: 1024px) and (max-height: 767px) {
	#tile-3 h3 { margin: 0 0 10px 0; margin: 0 0 1rem 0;}
	#tile-3.tile-inner.two-col .tile-padding { padding: 20px 60px; padding: 2rem 6rem;}
	#tile-3 .column .graphic img { height: auto; width: 77%; }
	#tile-3 .column.one .graphic { padding: 12px 0 19px; }
	#tile-3 .text p { font-size: 14px; font-size: 1.4rem; line-height: 19px; line-height: 1.9rem; }
	#tile-5 .row .text p { font-size: 16px; font-size: 1.6rem; line-height: 24px; line-height: 2.4rem; }
	#tile-5 .row-wrap .row:last-child .graphic { margin-top: -60px; }
}