/* ==========================================================================
   overview styles
   ========================================================================== */
html {
    border-top: none;
}

body {
    background: #fff;
    color: #535353;
    font-family: 'Fira Sans', source sans pro, Arial, Helvetica, sans-serif;
	font-variant-ligatures: no-common-ligatures;
	font-size: 1rem;
	line-height: 1.5rem;
    margin: 0 auto;
    padding: 0;
}


.page-width {
    margin: 0 auto;
    max-width: 1323px;
    padding: 0 2rem;
    width: 100%;
}

.section {
	max-width: 1100px;
}

#header {
    background: rgb(55,13,33);
    background: linear-gradient(0deg, rgba(55,13,33,1) 0%, rgba(62,22,45,1) 100%); 	
}

#header img {
    width: 100%;
	max-width: 1323px;
	vertical-align: bottom;
}

h1 { 
	font-size: 2.5rem;
	text-align: center;
	margin: 3rem 0;
}

h1 span {
    color: #a00057;	
}

h2 {
	display: block;
	color: #000;
	font-size: 1.0625rem;
	font-weight: 700;
}

.subsection .program {
    max-width: 18.75rem;
}

#moreDIV .subsection .program {
    width: 100%;
}

.subsection:nth-child(3n+2) .program {
	margin: 0 auto;
}

.subsection:nth-child(3n+3) .program {
    float: right;
}	

.subsection img {
	max-width: 95%
}

.subsection span.h2 {
	display: block;
	color: #000;
	font-size: 1.0625rem;
	font-weight: 700;
}

.subsection span.h2:hover {
	color: #a00057;
}

.subsection a span {
	color: #545252;
	font-size: 0.8125rem;
	max-width: 290px;
	display: block;
	line-height: 1.35rem;
	padding-right: 1.25rem;
}

#programs .view-all {
	text-align: center;
	margin: 2rem 0;
}

#programs button {
	background-color: #a00057;
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: .4rem 1.75rem;
}

#programs button:hover {
	background-color: #c6066f;
}

#moreDIV .subsection a {
	display: block;
	color: #000;
	margin: 0.5rem 0;
	padding-right: 1.25rem;
}

#about {
    background-color: #ffc16e;	
}

#about h1 {
	color: #7d1d1d;
	padding-top: 3rem;
}

#about h2 {
	color: #4a4a4a;
	border-bottom: 1px solid #4a4a4a;
	text-transform: uppercase;
	font-size: 1.375rem;
	padding-bottom: 0.5rem;
}

#about p {
   padding: 0 0 0.5rem 0;
   font-size: 1.0625rem;
   line-height: 1.75rem;
}

#about p.top {
	color: #7d1d1d;
	font-weight: 300;
    font-size: 1.6125rem;
    line-height: 2.2rem;
    padding-top: 0.9375rem;
	padding-bottom: 2.5rem;
}

#about p.fist {
   margin-top: 1.5rem;
}

#about p.small {
	font-size: 0.8125rem;
	margin-bottom: 4rem;
}

#about p.small a {
	color: #7d1d1d;
}

#about p.small span.spacer {
    	margin: 0 0.25rem;
}

#about img {
	float: left;
	margin: 1.5rem 1.5rem 0 0;
	max-width: 100%;
}

#contact {
    background-color: #5a0031;
    text-align: center;
    padding: 2rem 0;	
}

#contact .view-contact button {
	background-color: #5a0031;
	color: #fff;
	text-align: center;
	border: none;
}

#contact .view-contact button:hover {
	color: #e9a766;
}

#contact .view-contact button img {
	vertical-align: middle;
	margin: -0.5rem .5rem 0 0;
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {
	html {
        font-size: 16px;
    }
    h1 {
        font-size:2.2rem;
    }
}

/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
	.grid {
        max-width: 100%;
    }
	.grid.cols-3.heirs-width-1-3.cols-2__900.heirs-width-1-2__900.heirs-width-full__600 {
        max-width: 650px;
    }
	#moreDIV h2 {
        max-width:650px;
    }
	.subsection:nth-child(3n+2) .program {
	    margin: 0;
    }
    .subsection:nth-child(3n+3) .program {
        float: left;
    }	
	.subsection:nth-child(2n+2) .program {
        float: right;
    }	
	.subsection .program {
        max-width: 28.75rem;
    }
}

/* styles for medium screens (630px)
   ========================================================================== */
@media all and (max-width: 630px) {
	html {
        font-size: 15px;
    }
}


/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
	html {
        font-size: 16px;
    }
	h1 {
        font-size: 27px;
        margin: 2rem 0;
		letter-spacing: -.015em;
    }
	h2 {
        margin: auto;
        padding-bottom: 15px;
        padding-top: 20px;
    }
	.subsection:nth-child(n) .program {
        float: none;
		margin: 0 auto;
    }
    .subsection a span {
        width: 100%;
        padding-top: 5px;
    }

    .subsection .program {
        padding-bottom: 10px;
		max-width: 16.75rem;
    }
    #about p.top {
        font-size: 23px;
        line-height:1.4;
    }	
	#about img {
	    float: none;
	    margin: 1.5rem auto 0;
	    max-width: 100%;
		display: block;
    }
	#header img {
        width: 107%;
        max-width: 1200px;
        vertical-align: bottom;
    }
    #about p.top {
        padding-top: 15px;
        font-weight: 100;
    }

    #about p.small {
        margin-top: 40px;
        margin-bottom: 10px;
    }

    .section {
        max-width: 975px;
        margin: auto;
    }

    .view-all {
        display: none;
    }

    div#moreDIV {
        display: block !important;
    }

    #moreDIV .subsection a {
        font-size: .95rem;
    }

    .subsection img {
        max-width: 100%;
    }
	
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {}


/* printer styles
   ========================================================================== */
@media print {}